找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,来彰显自己曾经屌丝过,这插件还不错,支持多个上传和预览
首先引用,发现有的时候想学点新的东西,不过时间久了也经不住时光的消磨啊,把但是研究好的立马记录下来,我想比自己想研究的时候在回想会有用深刻的多
<link href="~/css/plupload.css" rel="stylesheet" />@*plupload上传*@ <script src="~/Plupload/jquery.plupload.queue.min.js"></script> <script src="~/Plupload/plupload.min.js"></script> <script src="~/Plupload/plupload.flash.min.js"></script>
html代码
1 <div id='radioDigs'> 2 <div id="radioDig" title="选择你要上传的路径" style="width:auto;height:250px;padding:10px;"> 3 <h5></h5> 4 </div> 5 </div> 6 <br/> 7 <div class="NewP" style="text-align:center;width:80%;"> 8 <table style="text-align:center;width:100%;"> 9 <tr> 10 <td><h5>您选择的上传路径为 : <span class='pathExplin'></span></h5></td> 11 <td><a href="#" class='newExplin' iconCls="icon-undo">重新选择上传路径</a></td> 12 </tr> 13 </table> 14 </div> 15 <br/> 16 <div id="flash_uploader" style="width: 850px; height: 500px;"> 17 18 </div> 19 <div id="thumbnails"></div> 20 <script type="text/javascript"> 21 var radioValue;//用于动态的获取单选框选中的值 22 function NewPlupload(){//重新选择上传路径 23 $('#radioDig').dialog({ 24 modal:true, 25 onClose:function(){ 26 radioValue = $('[name=ruploads]:checked').val(); 27 PluploadShow(); 28 } 29 }); 30 } 31 $(function () { 32 $.ajax({ 33 url:"/Home/Uploads", 34 //data:{}, 35 type:"GET", 36 dataType:"text", 37 success:function(data,status){ 38 $("#radioDig h5").html(data);//获取单项按钮 39 } 40 }); 41 $('#radioDig').dialog({ 42 modal:true, 43 buttons:[{ 44 text:'保存', 45 iconCls:'icon-ok', 46 //left:50, 47 handler:function(){ 48 radioValue = $('[name=ruploads]:checked').val(); 49 PluploadShow(); 50 $('#radioDig').dialog("close"); 51 } 52 },{ 53 text:'取消', 54 iconCls:'icon-no', 55 //left:50, 56 handler:function(){ 57 $('#radioDig').dialog("close"); 58 } 59 }] 60 }); 61 $.messager.show({ 62 title: "温馨提示", 63 msg: "上传图片尽量上传大小一致标准化的图片,以便修改!", 64 showType: 'show', 65 timeout: 5000 66 }); 67 $(".NewP .newExplin").click(function(){ 68 NewPlupload(); 69 }).linkbutton({ 70 plain:true 71 }); 72 }); 73 function PluploadShow(){//上传界面 74 $(".NewP .pathExplin").text(radioValue); 75 // 初始化Flash上传插件 76 $("#flash_uploader").pluploadQueue({ 77 runtimes: 'flash', //使用Flash插件 78 url: '/Home/Uploadify/Upload', //服务器端响应页面 79 max_file_size: '10mb', //最大文件限制 80 file_size: '1mb', //一次上传数据大小 81 multipart_params: { "path": radioValue}, //传到后台的参数 82 unique_names: true, //是否自动生成唯一名称 83 filters: [ //文件类型限制 84 { title: "图片文件", extensions: "jpg,gif,png,ico" }, 85 { title: "压缩文件", extensions: "zip,rar" } 86 ], 87 //resize: { width: 320, height: 240, quality: 80 },// 压缩图片的大小 88 // SWF文件位置 89 flash_swf_url: '/Plupload/plupload.flash.swf', 90 init: { 91 FileUploaded: function (up, file, info) { 92 if (info.response != null) { 93 var jsonstr = eval("(" + info.response + ")"); 94 for(var i = 0; i<jsonstr.length;i++){ 95 var thumbnailUrl = jsonstr[i].thumbnailUrl; 96 var originalUrl = jsonstr[i].originalUrl;//上传完整路径 97 var name = jsonstr[i].name;//图片名 98 //一个文件上传成功 99 addImage(name, originalUrl, thumbnailUrl); 100 } 101 } 102 }, 103 Error: function (up, args) { 104 //发生错误 105 if (args.file) { 106 alert('文件错误:' + args.file); 107 } else { 108 alert('出错' + args); 109 } 110 } 111 } 112 }); 113 } 114 </script>