uploadify 上传图片附件问题

ゝ一世哀愁。 2022-08-18 01:50 261阅读 0赞

在项目中遇到了上传多张图片问题，还需要时时上传后展示图片，就用uploadify做了这个功能，供大家参考借鉴。

![Image 1][]

$('\#file\_upload').uploadify(\{

buttonText : '上传图片',  
              auto : true,//自动上传  
              progressData : 'speed',//上传速度  
              multi : true,//true  上传多个文件  
              height : 25, //设置浏览按钮的高度 ，默认值  
              width:60, //设置浏览按钮的高度 ，默认值  
              fileTypeDesc : '文件格式:',  
              method:'POST',  
              queueID : 'fileQueue',  
              fileTypeExts : '\*.jpg;\*.png',  
              fileSizeLimit : '15MB',  
              queueSizeLimit : '4',  
              swf : 'plug-in/uploadify/uploadify.swf',  
              uploader : 'bridgeSpecialexamineDiseasesController.do',  
              overrideEvents : \[ 'onDialogClose', 'onUploadError', 'onSelectError' \] ,//重写   onDialogClose默认的错误提示信息就不会出现  
              onUploadStart : function(file) \{  
                 //在onUploadStart事件中，也就是上传之前，把参数写好传递到后台  
                  $('\#file\_upload').uploadify("settings",  
                      "formData", \{  
                           'upload' : 'upload',   //方法或者参数  
                          'sessionId':'$\{pageContext.session.id\}',  
                      \});  
                    
              \},  
              onQueueComplete : function(queueData) \{  
                  
              \},  
              onUploadSuccess : function(file, data, response) \{  
                  var d = $.parseJSON(data);  
                  if (d.success) \{  
                     ids +=ids==""?d.id:","+d.id;  
                     $('\#pictureids').textbox('setValue',ids);  
                     var html = "<li> "  
                                +"<div style='position: relative;' id='dfs'>"  
                                +"   <img src="+d.url+" name='pictureUrl' width='100px' height='120px' class='myimg'/> <br/> <center> <h3> "+d.name +"</h3>  </center> "  
                                +"   <div class='del ui-icon-closethick ui-icon'  ><input type='hidden' name='imgid' value='"+d.id+"'>删除</div>"  
                                +"</div>"  
                                +" </li>";    
                     $("\#pics").append(html);  
                  \}  
              \},  
              onFallback : function() \{  
                  alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试")  
              \},  
                //上传失败  //附件格式不正确，请上传JPG、BMP、PNG格式文件，大小不超过3MB  
                onUploadError : function(file, errorCode, errorMsg, errorString) \{  
                    // 手工取消不弹出提示  
                    if (errorCode == SWFUpload.UPLOAD\_ERROR.FILE\_CANCELLED  
                            || errorCode == SWFUpload.UPLOAD\_ERROR.UPLOAD\_STOPPED) \{  
                        return;  
                    \}  
                    var msgText = "上传失败\\n";  
                    switch (errorCode) \{  
                        case SWFUpload.UPLOAD\_ERROR.HTTP\_ERROR:  
                            msgText += "HTTP 错误\\n" + errorMsg;  
                            break;  
                        case SWFUpload.UPLOAD\_ERROR.MISSING\_UPLOAD\_URL:  
                            msgText += "上传文件丢失，请重新上传";  
                            break;  
                        case SWFUpload.UPLOAD\_ERROR.IO\_ERROR:  
                            msgText += "IO错误";  
                            break;  
                        case SWFUpload.UPLOAD\_ERROR.SECURITY\_ERROR:  
                            msgText += "安全性错误\\n" + errorMsg;  
                            break;  
                        case SWFUpload.UPLOAD\_ERROR.UPLOAD\_LIMIT\_EXCEEDED:  
                            msgText += "每次最多上传 " + this.settings.uploadLimit + "个";  
                            break;  
                        case SWFUpload.UPLOAD\_ERROR.UPLOAD\_FAILED:  
                            msgText += errorMsg;  
                            break;  
                        case SWFUpload.UPLOAD\_ERROR.SPECIFIED\_FILE\_ID\_NOT\_FOUND:  
                            msgText += "找不到指定文件，请重新操作";  
                            break;  
                        case SWFUpload.UPLOAD\_ERROR.FILE\_VALIDATION\_FAILED:  
                            msgText += "参数错误";  
                            break;  
                        default:  
                            msgText += "文件:" + file.name + "\\n错误码:" + errorCode + "\\n"  
                                    + errorMsg + "\\n" + errorString;  
                    \}  
                    alert(msgText);  
                \},  
              onSelectError :  function(file, errorCode, errorMsg) \{  
                    var msgText = "上传失败\\n";  
                    switch (errorCode) \{  
                        case SWFUpload.QUEUE\_ERROR.QUEUE\_LIMIT\_EXCEEDED:  
                            //this.queueData.errorMsg = "每次最多上传 " + this.settings.queueSizeLimit + "个文件";  
                            msgText += "每次最多上传 " + this.settings.queueSizeLimit + "个文件";  
                            break;  
                        case SWFUpload.QUEUE\_ERROR.FILE\_EXCEEDS\_SIZE\_LIMIT:  
                            msgText += "文件大小超过限制( " + this.settings.fileSizeLimit + " )";  
                            break;  
                        case SWFUpload.QUEUE\_ERROR.ZERO\_BYTE\_FILE:  
                            msgText += "文件大小为0";  
                            break;  
                        case SWFUpload.QUEUE\_ERROR.INVALID\_FILETYPE:  
                            msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts;  
                            break;  
                        default:  
                            msgText += "错误代码：" + errorCode + "\\n" + errorMsg;  
                    \}  
                    alert(msgText);  
                \},  
                onUploadProgress : function(file, bytesUploaded,  
                      bytesTotal, totalBytesUploaded,  
                      totalBytesTotal) \{  
               \}

\});

注意：（本篇文章可以转载）图片返回值自己可以在后台做处理，返回json格式。根据自己的需求来改写，如果本篇文章有什么错误或其它的请大家提出来。

[Image 1]: