Ajax implementation File upload (using the jquery plugin ajaxfileupload)

</pre><div style= "Text-align:center;" > Requirements: Upload a picture and the parameter values in the form field. </div><p> Preparation: jquery plugin ajaxfileupload download address--><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 "> Note: For some file import this way is no longer narrated. </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 Code

function Ajaxfileupload () {<span style= "White-space:pre" > </span>$.ajaxfileupload ({<span style= " White-space:pre "> </span> URL: ' ${basepath}/customermanager/updatecustomer.do ',//server-side request address for file upload <span style= "White-space:pre" > </span>                 Secureuri:false,//Need Security protocol, general set to false <span style= "White-space:pre" > </span>               &NBSP ; Fileelementid: ' Doc ',//File upload domain ID <span style= "white-space:pre" > </span>           &N Bsp     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>                },//This side is tested by $ (' form '). Serialize
(), error. <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;" > Parameter Description:</span>

<p style= "margin:10px auto 10px 30px; Font-family:verdana, Sans-serif; font-size:13px; line-height:13px; "　　
>1, URL   upload handler address.
2,fileelementid   The ID of the file domain that needs to be uploaded, which is the ID of <input type= "file" >. 3,secureuri whether secure commits are enabled, false by default.   4,datatype The data type returned by the server. Can be a xml,script,json,html.
If you do not fill in, jquery will automatically determine.
5,success the processing function that is executed automatically after the commit succeeds, the parameter data is the server return.
6,error the processing function that failed to submit the automatic execution. 7,data   Custom parameters.
This thing is more useful, when the data is related to the uploaded image, this thing will be used. 8, type   when you want to submit a custom parameter, this parameter is set to Post</p><p style= "margin:10px auto 10px 30px; Font-family:verdana, Sans-serif; font-size:13px; line-height:13px; " > If you want to implement multiple file uploads. Here you need to modify the source code of the plugin. (Note for the original code) </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);   &NBsp
    $ (oldelement). before (newelement);         $ (oldelement). AppendTo (Form), */        for (var i in Fileelementid) {&nbsp ;               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; " > After modification, the parameter fileelementid is an array of strings </p>

<p style= "margin:10px auto 10px 30px; Font-family:verdana, Sans-serif; font-size:13px; line-height:13px; " > Note: If you have any mistakes, please advise ... </p>