借助webuploader插件完成ajax异步上传图片（多张以及单张）

在做之前我们需要先引入两个文件，webuploader.min.js和webuploader.css

html代如下：

js代码如下：

var url = “xxxxxxx”;//服务器的地址

var upload1 = initUpload('upload_card_img',url );//初始化插件
//上传成功后，返回图片的信息
uploadSuccess(upload1,'upload_card_img');

上面是两个方法，整理后可多次重复调用，不用再写重复的代码

方法具体内容如下：

function initUpload(id,url){
var uploader = WebUploader.create({
                auto: true,
                pick: {
                    id: '#'+id,
                    label: '点击选择图片',
                    multiple: true
                },
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                },
                swf: 'js/Uploader.swf',
                server: url,
                fileVal: "file",
                duplicate: true
            });
        return uploader;
}

function uploadSuccess(upload,id){
upload.on('uploadSuccess', function(file, response) {
        if (response.state == 'SUCCESS') {
            $("#"+id).html('');
            $("#"+id.substr(7)).val(response.url);
            }
      });

}

这样前端异步上传图片就完成了，以后可以直接拿来用，（另外upload初始化的时候 ，需要引入一个swf文件，这个可以在webuploader官网下载即可）