Ajax實現檔案上傳（使用jQuery外掛程式之ajaxFileUpload）

</pre><div style="text-align: center;">需求： 上傳圖片並表單域中的參數值。</div><p>準備：Jquery的外掛程式 ajaxFileUpload下載地址--><span style="font-family: verdana, sans-serif; font-size: 13px; line-height: 13px;">http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar</span></p><p><span style="font-family:verdana,sans-serif; font-size:13px; line-height:13px">     備忘：對於一些檔案匯入這邊就不再進行講述。</span></p><p><span style="font-family:verdana,sans-serif; font-size:13px; line-height:13px"></span></p><pre name="code" class="html"><span style="white-space:pre"></span><form action="" method="post" enctype="multipart/form-data" id="commitForm">

<span style="white-space:pre"></span><input type="text" id="item_text" name="contact" size="30" ">

  <span style="white-space:pre"></span> <input type=file name="file" id="doc" onchange="javascript:setImagePreview();">

   </form>

JS代碼

function ajaxFileUpload(){<span style="white-space:pre"></span>$.ajaxFileUpload({<span style="white-space:pre"></span> url: '${basePath}/customerManager/updateCustomer.do', //用於檔案上傳的伺服器端請求地址<span style="white-space:pre"></span>                 secureuri: false, //是否需要安全性通訊協定，一般設定為false<span style="white-space:pre"></span>                 fileElementId: 'doc', //檔案上傳域的ID<span style="white-space:pre"></span>                 data: {<span style="white-space:pre"></span>                <span style="white-space:pre"></span> contact:$(":text[name='contact']").val()<span style="white-space:pre"></span>                <span style="white-space:pre"></span><span style="white-space:pre"></span>                 },//這邊經測試，通過$('form').serialize(),出錯。<div style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"></span>                 dataType: 'json', </span></div>

 <span style="white-space:pre"></span>success:function(){},

<span style="white-space:pre">error:function(msg){<span style="white-space:pre"></span>                <span style="white-space:pre"></span> alert(msg)<span style="white-space:pre"></span>                 }</span>

<span style="font-family: verdana, sans-serif;">參數說明：</span>

<p style="margin: 10px auto 10px 30px; font-family: verdana, sans-serif; font-size: 13px; line-height: 13px;">1、url　　　　　　　　　　  上傳處理常式地址。　　2，fileElementId　　　　　  需要上傳的檔案域的ID，即<input type="file">的ID。3，secureuri　　　　　　　 是否啟用安全提交，預設為false。 4，dataType　　　　　　　 伺服器返回的資料類型。可以為xml,script,json,html。如果不填寫，jQuery會自動判斷。5，success　　　　　　　　提交成功後自動執行的處理函數，參數data就是伺服器返回的資料。6，error　　　　　　　　　 提交失敗自動執行的處理函數。7，data　　　　　　　　　 自訂參數。這個東西比較有用，當有資料是與上傳的圖片相關的時候，這個東西就要用到了。8, type　　　　　　　　　  當要提交自訂參數時，這個參數要設定成post</p><p style="margin: 10px auto 10px 30px; font-family: verdana, sans-serif; font-size: 13px; line-height: 13px;">如果要實現多檔案上傳的話。這邊需要修改外掛程式的原始碼。（注釋的為原先代碼）</p><p style="margin: 10px auto 10px 30px; font-family: verdana, sans-serif; font-size: 13px; line-height: 13px;">/*var oldElement = $('#' + fileElementId);        var newElement = $(oldElement).clone();        $(oldElement).attr('id', fileId);        $(oldElement).before(newElement);        $(oldElement).appendTo(form);*/        for(var i in fileElementId){                var oldElement = jQuery('#' + fileElementId[i]);                var newElement = jQuery(oldElement).clone();                jQuery(oldElement).attr('id', fileId);                jQuery(oldElement).before(newElement);                jQuery(oldElement).appendTo(form);          }  </p><p style="margin: 10px auto 10px 30px; font-family: verdana, sans-serif; font-size: 13px; line-height: 13px;">修改完之後參數fileElementId 為字串數組</p>

<p style="margin: 10px auto 10px 30px; font-family: verdana, sans-serif; font-size: 13px; line-height: 13px;">註：如有錯請大家指點。。。</p>