Ajaxfileupload.js combined input[type=file] No refresh upload

jquery Plugin Ajaxfileupload is used to implement the Ajax file upload, the plug-in is very simple to use, and then write a demo demo How to use the Ajaxfileupload plugin for file upload.

Description

Syntax: $.ajaxfileupload ([options])

Options parameter Description:

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

Error message:

1,syntaxerror:missing; Before statement error
If this error occurs, you will need to check if the URL path is accessible
2,syntaxerror:syntax Error errors
If this error occurs, you need to check the server spooler that handles the commit operation for any syntax errors
3,syntaxerror:invalid Property ID Error
If this error occurs, you need to check whether the Text field property ID exists
4,syntaxerror:missing} in XML expression error
If this error occurs, you need to check whether the file name is consistent or not present.
5, other custom errors
You can use the variable $error Direct printing method to check whether the parameters are correct, compared to the above these invalid error prompts are much more convenient.

1, introduce its supporting files, note the reference order

<script type= "Text/javascript" src= "<%=basepath%>js/jquery-1.8.0.min.js" ></script><script Type= "Text/javascript" src= "<%=basepath%>js/ajaxfileupload.js" ></script>

2, in the Page Setup file selection box, do not need form package: note here ID and name must be set, in the article you will know the reason, do not do a detailed explanation here.

<input type= "File" id= "FileUpload" name= "Fileuploa"/>

3. Implement upload function

<script type= "Text/javascript" >    //Initialize page $ (document). Ready (function (e) {

Select File box to select the file Change event $ ("#fileUpload"). Change (function () {var url=$ (this). Val (); var extend=url.substring (Url.indexof (".") +1); var ext=new Array ("JPG", "JPEG", "PNG", "GIF", "BMP"); if (ext.tostring () indexOf (extend) ==-1) {alert ("The format you uploaded is incorrect and only supports JPG, JPEG, PNG, GIF, BMP, please re-select!) "); }  $.ajaxfileupload ({        URL: ' <%=basepath%>attach/api/upload ',///Background Submit address        secureuri:false,//Async        Fileelementid: ' FileUpload ',//upload control ID        dataType: ' json ',//Return Data Information Format        type: ' Post ',//if with additional parameters, set type        Success:function (data, status) {            if (data.success ==true) {               var attach=data.result[0];               $ ("[Name=photo]"). attr ("src", attach.filepath);               Alert ("Upload succeeded");             } else {                alert ("Server failure, try again later!") ");            }        , Error:function (data, status, E) {           alert (e);        }    });}); </script>

4. Background interface: Spring MVC is used here

@RequestMapping (value = "/upload", Method ={requestmethod.post,requestmethod.get}) @ResponseBodypublic hashmap< String,object> Upload (httpservletrequest request, httpservletresponse response)

                                                    Throws Instantiationexception, illegalaccessexception{hashmap<string,object> result=new HashMap<String, Object> (); Arraylist<attach> Attachlist=attachservice.uploadfy (Request), if (Attachlist.size () >0) {Result.put (" Success ", true); Result.put (" Result ", attachlist);} Else{result.put ("Success", false);}    return result;}

5, achieve the above steps can be completed upload.

Summary:

You may encounter the following problems during use:

1. Upload the exception: syntaxerror:unexpected token <

Cause: The contenttype= "Application/json" is added to the response on the server side. But sometimes the backend to do so is necessary, so modify the Ajaxfileupload source code, the <pre></pre> tag removed, as follows: (Please refer to: http://liwx2000.iteye.com/blog/1540321)

Uploadhttpdata:function (r, type) {var data =!type; data = Type = = "xml" | | Data?          R.responsexml:r.responsetext; If the type is ' script ', eval it in global context if (type = = "Script") jquery.globaleval (dat          a);          Get the JavaScript object, if JSON is used.               if (type = = "json") {////////////The following is the new code///////////////data = R.responsetext;               var start = Data.indexof (">");                 if (Start! =-1) {var end = Data.indexof ("<", start + 1);                  if (end! =-1) {data = data.substring (start + 1, end);          }}///////////above is the new code///////////////eval ("data =" + data); }//Evaluate scripts within HTML if (type = = "html") jQuery ("<div>"). HTML (data). Ev            Alscripts ();      return data;   }

2, using <input type= "file" id= "FileUpload"/> This way, in the background to receive the value?
Cause: You need to set the Name property <input type= "file" id= "FileUpload" name= "name any"/>

Ajaxfileupload.js combined input[type=file] No refresh upload