uploadify 上传图片附件问题

本文介绍了如何使用uploadify插件实现项目中的图片上传与实时预览功能,包括配置参数、上传机制及成功上传后的图片展示。

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




$('#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格式。根据自己的需求来改写,如果本篇文章有什么错误或其它的请大家提出来。



这份毕业设计期末大作业源码为 Web 网页设计与制作领域提供了一个全面且实用的示例。它涵盖了从前端页面布局到后端交互功能的一系列关键技术,旨在帮助学生展示其在网页开发方面的综合能力和专业知识。在前端设计上,源码运用了 HTML5 和 CSS3 的最新特性,构建出精美的页面结构和视觉效果。通过合理的布局规划,包括导航栏、轮播图、内容区域、侧边栏和页脚等常见元素的安排,使得网页具有清晰的信息架构和良好的用户体验。同时,CSS 动画和过渡效果的巧妙运用,为页面增添了生动性和交互性,如按钮的悬停效果、菜单的展开与收起等,让用户在浏览过程中感受到流畅与舒适。从功能实现角度看,该源码结合 JavaScript 和 jQuery 库,实现了丰富的交互功能。例如,表单验证确保用户输入的信息符合要求,提高数据的准确性和完整性;图片的懒加载技术优化了页面加载速度,提升用户等待的耐心;响应式设计使网页能够自适应不同屏幕尺寸的设备,无论是电脑、平板还是手机,都能呈现出完美的布局和效果,满足了当今多终端浏览的需求。此外,源码的结构清晰,注释详尽,易于理解和二次开发。对于即将毕业的学生而言,这是一个宝贵的学习资源,不仅可以作为毕业设计的基础框架,通过进一步的修改和完善,还能够打造出具有个人特色和专业水准的完整网页项目,为未来的职业发展打下坚实的基础,同时也为网页设计制作领域的初学者提供了一个优秀的参考范例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值