ajax异步多图上传插件,支持IE8的多文件、多图异步上传并能预览的插件

插件描述：该插件是基于百度webuploader的一个插件，支持IE8，可以上传任何文件，上传图片可以预览，异步上传，使用非常方便

更新时间：2018/3/24 下午9:21:47

更新说明： 如在IE8/9浏览器中不能使用，请更新flash player，因为webuploader在低版本IE是使用flash进行文件选择及上传的

1、新增了自定义请求header、自定义预览图、反复上传功能    2、优化了之前不够好的代码    3、新增了许多使用案例。(具体请参见：https://941477276.github.io/UploadPreview/doc/index.html)

更新时间：2017/12/18 上午9:19:27

更新说明：修复IE8下的一些bug

更新时间：2017/12/4 上午11:45:30

更新说明：

1、使用了最新版本的webuploader

2、更改了一些功能的内部实现方式

3、增加了拖拽上传功能

更新时间：2017/9/30 下午11:14:43

更新说明：

1、修复IE8点击上传图标删除不了的bug及文件数量统计不正确的bug

2、优化预览图宽度计算方式，当自定义预览框时，预览图大小随着.imgWrap元素的宽度而变化。

更新时间：2017/8/28 下午5:32:12

更新说明：

1)、使用面向对象编程思想进行封装，一个页面中可以有n个实例

2)、支持AMD、CMD

3)、提供了丰富的参数配置及方法，可灵活应用于您的项目中

4)、使用简单，方便

即可以选择图片又可以选择其他文件

选择图片

上传图片

只能选择图片

选择图片

上传图片

重新上传

$(function() {

var uploader = uploadImage({

wrap: jQuery("#uploader"), //包裹整个上传控件的元素，必须。可以传递dom元素、选择器、jQuery对象

/*预览图片的宽度，可以不传，如果宽高都不传则为包裹预览图的元素宽度，高度自动计算*/

//width: "160px",

height: 100, //预览图片的高度

auto: false, //是否自动上传

method: "POST", //上传方式，可以有POST、GET

sendAsBlob: false, //是否以二进制流的形式发送

viewImgHorizontal: true, //预览图是否水平垂直居中

fileVal: "file", // [默认值：'file'] 设置文件上传域的name。

btns: { //必须

uploadBtn: $("#upload_now"), //开始上传按钮，必须。可以传递dom元素、选择器、jQuery对象

retryBtn: null, //用户自定义"重新上传"按钮

chooseBtn: '#choose_file', //"选折图片"按钮，必须。可以传递dom元素、选择器、jQuery对象

chooseBtnText: "选择文件" //选择文件按钮显示的文字

},

pictureOnly: false, //只能上传图片

datas: {

"uuid": new Date().getTime()

}, //上传的参数,如果有参数则必须是一个对象

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！false为不压缩

resize: false,

//是否可以重复上传，即上传一张图片后还可以再次上传。默认是不可以的，false为不可以，true为可以

duplicate: false,

multiple: true, //是否支持多选能力

swf: "Uploader.swf", //swf文件路径，必须

url: "index2.html", //图片上传的路径，必须

maxFileNum: 20, //最大上传文件个数

maxFileTotalSize: 10485760, //最大上传文件大小，默认10M

maxFileSize: 2097152, //单个文件最大大小，默认2M

showToolBtn: true, //当鼠标放在图片上时是否显示工具按钮,

onFileAdd: null, //当有图片进来后所处理函数

onDelete: null, //当预览图销毁时所处理函数

/*当单个文件上传失败时执行的函数，会传入当前显示图片的包裹元素，以便用户操作这个元素*/

uploadFailTip: null,

onError: null, //上传出错时执行的函数

notSupport: null, //当浏览器不支持该插件时所执行的函数

/*当上传成功(此处的上传成功指的是上传图片请求成功，并非图片真正上传到服务器)后所执行的函数，会传入当前状态及上一个状态*/

onSuccess: null

});

/*如果按钮开始是隐藏的，经过触发后才显示，则可以用这个方法重新渲染下*/

//uploader.refresh();//该方法可以重新渲染选择文件按钮

//uploader.upload();//调用该方法可以直接上传图片

//uploader.retry();//调用该方法可以重新上传图片

console.log(uploader);

var uploader2 = uploadImage({

wrap: "#uploader2", //包裹整个上传控件的元素，必须。可以传递dom元素、选择器、jQuery对象

/*预览图片的宽度，可以不传，如果宽高都不传则为包裹预览图的元素宽度，高度自动计算*/

//width: "160px",

height: 120, //预览图片的高度

fileVal: "file", // [默认值：'file'] 设置文件上传域的name。

btns: { //必须

uploadBtn: $("#upload_now2"), //开始上传按钮，必须。可以传递dom元素、选择器、jQuery对象

retryBtn: "#retry_upload", //用户自定义"重新上传"按钮

chooseBtn: '#choose_file2', //"选折图片"按钮，必须。可以传递dom元素、选择器、jQuery对象

chooseBtnText: "选择图片" //选择文件按钮显示的文字

},

pictureOnly: true, //只能上传图片

resize: false,

//是否可以重复上传，即上传一张图片后还可以再次上传。默认是不可以的，false为不可以，true为可以

duplicate: true

});

});