找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,来彰显自己曾经屌丝过,这插件还不错,支持多个上传和预览

首先引用,发现有的时候想学点新的东西,不过时间久了也经不住时光的消磨啊,把但是研究好的立马记录下来,我想比自己想研究的时候在回想会有用深刻的多

Jquery plupload上传笔记(修改版)Jquery plupload上传笔记(修改版)

<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>
View Code

相关文章:

  • 2022-12-23
  • 2021-12-18
  • 2022-12-23
  • 2022-12-23
  • 2021-05-11
  • 2021-09-05
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-08-16
  • 2022-12-23
  • 2022-12-23
  • 2021-06-06
  • 2022-12-23
  • 2022-12-23
  • 2021-07-09
相关资源
相似解决方案