
插件描述:该插件是基于百度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
});
});