http://www.jq22.com/jquery-info14809 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>http://www.jq22.com/jquery-info14809</title> <link rel="stylesheet" href="http://www.jq22.com/demo/webuploader201707181003/css/webuploader.min.css"> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="http://www.jq22.com/demo/webuploader201707181003/webuploader.js"></script> <script type="text/javascript" src="http://www.jq22.com/demo/webuploader201707181003/uploadImgPreview.min.js"></script> <style type="text/css"> </style> </head> <body> <!-- .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> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 支持IE8的多文件、多图异步上传并能预览的插件 喜欢 (0)or分享 (0)
