扩展dwz上传uploadify功能

我用的是dwz1.2final版本，使用他封装的uploadify插件完成上传功能，但是我实现的是跨域上传+回显。

1。我用的是struts2，要想实现struts2的上传就必须传参数fileDataName，但是dwz.ui.js并没有这个属性，所以自己修改了一下，添加这个属性。

2.由于要上传之后回显图片，所以要在onComplete：属性上设置响应函数，使其服务器返回的图片地址放入img src属性中，实现回显。

dwz.ui.js改动如下：

if ($.fn.uploadify) {
  $(":file[uploader]", $p).each(function(){
   var $this = $(this);
   var options = {
    uploader: $this.attr("uploader"),
    script: $this.attr("script"),
    cancelImg: $this.attr("cancelImg"),
    //扩充上传file名称，使其支持struts2上传功能
    fileDataName : $this.attr("fileDataName"),
    queueID: $this.attr("fileQueue") || "fileQueue",
    fileDesc: $this.attr("fileDesc") || "*.jpg;*.jpeg;*.gif;*.png;*.pdf",
    fileExt : $this.attr("fileExt") || "*.jpg;*.jpeg;*.gif;*.png;*.pdf",
    //扩充图片存放位置
    folder : $this.attr("folder"),
    auto: true,
    multi: true,
    onError:uploadifyError,
    //扩充ui，使其上传可以调自己定义的函数
    onComplete: $this.attr("onComplete") || uploadifyComplete,
    onAllComplete: uploadifyAllComplete
   };

然后定义一个js叫dwz.my.js里面放的是一些自己定义的方法，

例如onComplete：对应的方法:

/***
 * uplaodify响应函数
 * 当相应不为false的时候，拼接回显图片的路径并显示图片
 */
function myUplaodifyComplete(event,queueId,fileObj,response,data){
        if(response != 'false'){
         var fileUrl = $('#serverUrl').val()+'/'+response;
         $('#imgpic').attr("src",fileUrl);//往img的src存放图片上传后的路径
         $('#imagediv').show();//放图片回显的div
         $('#fileUrl').val(fileUrl);
         //alert($('#fileUrl').val());
        }

}

 

 

uplaod.jsp代码如下：

<div class="pageContent" >
 <div class="pageFormContent" layoutH="80">
  <div id="fileQueue_demo" class="fileQueue"></div>
  <input id="fileInput_demo" type="file" name="file"
   uploader="${ctx}/uploadify/scripts/uploadify.swf"
   cancelImg="${ctx}/uploadify/cancel.png"
   script="${resServerAddr}/up/upload!save.action"
   scriptData="{folderName:'images/info'}"
   fileQueue="fileQueue_demo"
   fileDataName="file" folder="/uploads" onComplete="myUplaodifyComplete"
   />
 </div>
 <div class="formBar">
     <ul>
    <li>
     <div class="button">
      <div class="buttonContent">
       <button type="button" class="close">关闭</button>
      </div>
     </div>
    </li>
   </ul>
     </div>
</div>

然后一定要在main.jsp中将dwz.my.js放到head中，让他初始化。注意放置顺序。

大功告成，至于跨域上传 在我的另一篇文章中已有介绍。

至于dwz用起来总体感觉不错  但是api文档里讲的东西太少了，具体还得需要看他的demo自己摸索，必要时候看他源代码。dwz网上资料也很少，希望我写的这些能给大家帮助

 原创转载请注明出处http://shen84121062.iteye.com/admin/blogs/1128510