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

所属分类：输入-上传

63759 361 查看评论 (116)

分享到微信朋友圈

查看演示立即下载

插件描述：该插件是基于百度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）、使用简单，方便

<!-- .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>

视觉滚动差效果

jQuery幻灯片播插件jDiaporama