天天看点

ajax异步多图上传插件,支持IE8的多文件、多图异步上传并能预览的插件即可以选择图片又可以选择其他文件

ajax异步多图上传插件,支持IE8的多文件、多图异步上传并能预览的插件即可以选择图片又可以选择其他文件
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

});

});