在不使用UI框架，upload上傳附件需要使用flash外掛支援，沒有flash外掛，上傳附件解決方案，封裝公共模組呼叫

1. 下載uploadfive外掛 ：點選下載
   html

<div id="cd-signup">
           <p class="fieldset">
               <label class="image-replace cd-photo1" for="signup-idimage1"></label>
               <input class="full-width has-padding has-border"
 

                   id="signup-idimage1" type="file" name="upload">
               <input type="hidden" name="frontSide" id="frontSide">
               <div class="hidden" id="tip-queue1"></div>
            </p>
           <--存放上傳附件的盒子-->
       <div id="filelist"></div
 
>
    </div>

javascript

    //TODO 事件  
     $("#filelist").on("click", ".glyphicon-trash", this.proxy(this._on_deletefile_click));  //刪除附件事件
     this.data = {mothed:"uploadfile",user:'1'}; //來自於父元件引數，自定義
    this.attachmentIds = []; //上傳成功後返回的id
    this.attachmentList = []; //上傳成功後返回的json物件
    //TODO 上傳附件引數擴充套件
 

    var data = {
         "tokenid": $.cookie("tokenid"),
      };
    data = $.extend(data,this.data);
    var dataString = "";
    for(item in data){
        dataString +=item + "=" +data[item] +'&';
    }
   $('#signup-idimage1').uploadifive({
       'auto' : true,  //開啟自動上傳
       'uploadScript' : '/sms/modify.do?'+dataString, //上傳地址和引數
       'fileObjName' : 'upload',
       'buttonText' : '上傳附件', //按鈕渲染文字
       'queueID' : 'tip-queue1', //上傳附件展示列表，可定義【自定義div--filelist】
       'fileType' : '.', //上傳附件型別
       'multi' : true,  //多個附件

       'fileSizeLimit'   : 5242880,
       'uploadLimit' : 10, //限制數量
       'queueSizeLimit'  : 10,
       'onUploadComplete' : this.proxy(function(file, data) {   //上傳完成時操作
           var response =typeof data == 'string' ?  JSON.parse(data) : data;
           if (response.success ==false) {
               alert("系統異常！");
           } else {
               $("#frontSide").val(response.img); //隱藏域
               if(response.data && response.data.aaData && response.data.aaData.length > 0){ //裡面屬於業務模組；callAttachments方法返回父元件Id和附件物件；供父元件呼叫
                this.attachmentIds = [];
                this.attachmentList = [];
                this.attachmentList.push(response.data.aaData[0]);
                this.attachmentIds.push(response.data.aaData[0].id);
                this.callAttachments({
                    attachmentList:this.attachmentList[0],
                    attachmentId:this.attachmentIds[0]
                })
                //渲染附件
                $.each(response.data.aaData, function(idx, file) {
                    $("<div fileId=" +file.id+"><a  href='javascript:;'>" + file.fileName + "</a><span fileId=" +file.id+" class='glyphicon glyphicon-trash' style='cursor:pointer;margin-left:10px'></span></div>").appendTo($("#filelist")).data("fileid", file.id);
                 });
               }
           }
       }),
       onCancel : this.proxy(function(file) {   //取消上傳時操作
          $("#frontSide").val("");
           /* 注意：取消後應重新設定uploadLimit */
           $data    = $("#signup-idimage1").data('uploadifive'),
           settings = $data.settings;
           settings.uploadLimit++;
           console.log(file.name + " 已取消上傳~!");

       }),
       onFallback : function() {
           console.log("該瀏覽器無法使用!");
       },
       onUpload : function(file) {  //上傳之前操作

       },
   });

圖例