图片上传插件 plupload 使用 预览图 注:测试需接口才能看见效果

引入js文件，plupload的源文件可以到github上去下载

html：

<input type="file" id="upPic" style="height: 100%; width: 100%; background-color: aquamarine;

">

<div classs="fx"></div>  

js：

var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
    browse_button: 'upPic', //输入要绑定的元素 为id值，绑定成功后点击该元素就会触发！
    url: '/api/uploadAuth', //上传图片的地址
    unique_names: true, //当值为true时会为每个上传的文件生成一个唯一的文件名，并作为额外的参数post到服务器端，参数明为name,值为生成的文件名。
    filters: {
        max_file_size: '2mb', //限制图片的大小
        prevent_duplicates: true,
        mime_types: [ //只允许上传图片文件
            {
                extensions: "jpg,jpeg,gif,png" //文件格式
            }
        ],

    }
});

uploader.init(); //初始化

uploader.bind('FilesAdded', function(uploader, files) { //为uploader添加FilesAdded事件，当文件添加到上传队列后触发。监听函数参数：(uploader,files)
    //uploader为当前的plupload实例对象，files为一个数组，里面的元素为本次添加到上传队列里的文件对象
    if(files.length + $(".uPviewthumgImg").length > 2) {  //数组中上传的长度小于2才执行下面
        for(var i = 0; i < files.length; i++) {
            uploader.removeFile(files[i]);//删除当前对象里的数组元素。
        }
        alert("只能上传两张 ");
        return false;
    }
    if($(".uPviewthumgImg").length > 1) { //判断该图片的类名总的长度是否小于1
        for(var i = 0; i < files.length; i++) {
            uploader.removeFile(files[i]); //删除当前对象里的数组元素。
        }
        alert("只能上传两张 ");
        return false;
    }

    uploader.start(); //开始上传

});

uploader.bind('UploadProgress', function(uploader, files) {//为uploader添加FilesAdded事件，会在文件上传过程中不断触发，可以用此事件来显示上传进度
    $(".fx p").html("图片上传中，请稍后...");  //这里是提示，样式可自己控制
})

//success 
uploader.bind('FileUploaded', function(uploader, file, responseObject) {//当队列中的某一个文件上传完成后触发    
/*uploader为当前的plupload实例对象，file为触发此事件的文件对象，responseObject为服务器返回的信息对象，它有以下3个属性：
response：服务器返回的文本
responseHeaders：服务器返回的头信息
status：服务器返回的http状态码，比如200*/
    if(responseObject.response) {
        _obj = eval("(" + responseObject.response + ")");
    }
    if(!_obj) return false;
    if(_obj.error == 0 && _obj.filepath != "") {
        imgsrc = _obj.url;
        $('.fx').append('<img  data-path="' + _obj.filepath + '" class="uPviewthumgImg" src="' + imgsrc + '"  alt="图片上传中请稍后"/>');
        $(".fx p").html("图片上传成功")
    } else {
        $(".fx p").html("上传图片失败")
    }

});

//plupload中为我们提供了mOxie对象
//有关mOxie的介绍和说明请看：https://github.com/moxiecode/moxie/wiki/API
//如果你不想了解那么多的话，那就照抄本示例的代码来得到预览的图片吧
function previewImage(file, callback) { //file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
    if(!file || !/image\//.test(file.type)) return; //确保文件是图片
    if(file.type == 'image/gif') { //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
        var fr = new mOxie.FileReader();
        fr.onload = function() {
            callback(fr.result);
            fr.destroy();
            fr = null;
        }
        fr.readAsDataURL(file.getSource());
    } else {
        var preloader = new mOxie.Image();
        preloader.onload = function() {
            preloader.downsize(300, 300); //先压缩一下要预览的图片,宽300，高300
            var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
            callback && callback(imgsrc); //callback传入的参数为预览图片的url
            preloader.destroy();
            preloader = null;
        };
        preloader.load(file.getSource());
    }
}

function smsCode(seconds) {
    var param = {};
    param.tempname = $('#temp_mobile').val();
    param.tempvercode = $('#tempvercode').val();
    param.tempcountry = $('#temp_country').val();
    $.post('/Personal/sendPhoneSms', param, function(res) {
        if(res.code == 1000) {
            $('#smsCodeBtn').hide();
            $('#smsCodeBtnDisable').show();
            var num = seconds;
            var smsCodeInterval = setInterval(function() {
                num--;
                if(num == 0) {
                    clearInterval(smsCodeInterval);
                    $('#smsCodeBtn').show();
                    $('#smsCodeBtnDisable').hide();
                }
                $('#smsCodeBtnDisable span').html(num);
            }, 1000);
        } else {
            $('#temp_mobileauth_err').text(res.msg);
        }
    }, 'json');

}

 

转载于:https://my.oschina.net/u/3010603/blog/826593