插件描述：该插件是基于百度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）、使用简单，方便
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!-- .webuploader-pick 这个类可以控制选择文件可点按钮的大小 --><h1>即可以选择图片又可以选择其他文件</h1><div id="uploader"></div><!-- 千万不要使用button标签，否则在火狐和IE中点击会无效 <button type="button" id="choose_file">选择图片</button> --><div class="choose-file-btn" id="choose_file">选择图片</div><button type="button" id="upload_now">上传图片</button><h2>只能选择图片</h2><div id="uploader2"></div><!-- 千万不要使用button标签，否则在火狐和IE中点击会无效 <button type="button" id="choose_file">选择图片</button> --><div class="choose-file-btn" id="choose_file2">选择图片</div><button type="button" id="upload_now2">上传图片</button><button type="button" id="retry_upload">重新上传</button><script> $(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 }); });</script> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery幻灯片播插件jDiaporama
- 下一个特效： 视觉滚动差效果