A simple jquery plugin ajaxfileupload.js implementation Ajax upload file Example _jquery

jquery plug-in ajaxfileupload can implement Ajax file upload, the plug-in is very simple to use, first understand the correct use of the Ajaxfileupload plug-in method, and then learn some common error messages and solutions.

Instructions for use

Need to use jquery library files and ajaxfileupload library files

Working with instances

One, including the file section

Copy Code code as follows:

<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Ajaxfileupload.js" ></script>

Two, HTML part

Copy Code code as follows:

<input id= "filetoupload" type= "file" size= "Name=" "filetoupload" class= "Input" >
<button class= "button" id= "Buttonupload" onclick= "return Ajaxfileupload ();" > Upload </button>

Only three elements, a dynamically loaded small icon, a file field, and a button
Note: Uploading files using the Ajaxfileupload plugin does not require a form, as follows:

<form name= "form" action= "" method= "POST" enctype= "Multipart/form-data" >
...... Related HTML code ...
</form>
Because the Ajaxfileupload plug-in automatically generates a form to submit the form.

For the file domain ID and the Name,ajaxfileupload plug-in Fileelementid parameter, you need to get the filename domain ID, and if you need to know the file domain name in order to get upload file information, you must be aware of the relationship.

Three, JavaScript part

<script type= "Text/javascript" > 
function Ajaxfileupload () { 
loading ();//dynamic load small icon 
$. Ajaxfileupload ({ 
URL: ' upload.php ', 
secureuri:false, 
fileelementid: ' Filetoupload ', 
dataType: ' JSON ', 
success:function (data, status) { 
if (typeof (Data.error)!= ' undefined ') { 
if (data.error!= ') { 
alert (data.error); 
} else{ 
alert (data.msg);}} 
, 
error:function (data, status, E) { 
alert (e);}} 
) return 
false; 
} 
function loading () { 
$ ("#loading"). Ajaxstart (function () { 
$ (this). Show (); 
}). Ajaxcomplete (function () { 
$ (this). Hide (); 
}); 
 

Main parameter Description:
1,url represents the file path for handling file uploads, and can test whether the URL can be accessed directly in the browser, as above: upload.php
2,fileelementid represents the file domain ID, as above: filetoupload
3,secureuri whether security commits are enabled, default is False
4,datatype data data, general selection of the original ecological json,javascript
5,success commit successful post processing function
6,error Commit failure processing function

There are two methods, a dynamically loaded small icon prompts the function loading () and Ajaxfileupload file upload $.ajaxfileupload () function, which is similar to our use of the Jquery.ajax () function, very simple to use, Here I omitted the PHP processing upload file, using the jquery plugin ajaxfileupload implementation Ajax file is so simple.

At the same time we need to understand the relevant error hints

1,syntaxerror:missing; Before statement error
If this error occurs, you need to check that the URL path is accessible

2,syntaxerror:syntax Error errors
If this error occurs, check to see if there is a syntax error with the PHP file that handles the commit operation

3,syntaxerror:invalid Property ID Error
If this error occurs, check to see if the property ID exists

4,syntaxerror:missing} in XML expression error
If this error occurs, check to see if the file domain name is consistent or non-existent

5, other custom errors
You can use the variable $error Direct printing method to check whether the parameters are correct, compared to these invalid error tips or more convenient.

Using the jquery plugin ajaxfileupload upload file is very practical, because of its easy to use, because some of the plug-ins compared to other file upload Plug-ins used the largest number of users, very worthy of recommendation.

Processing page:

Using System;
Using System.Collections;
Using System.Configuration;
Using System.Data;
Using System.Web;
Using System.Web.Security;
Using System.Web.UI;
Using System.Web.UI.HtmlControls;
Using System.Web.UI.WebControls;

Using System.Web.UI.WebControls.WebParts;
  Public partial class Web_ajax_FileUpload:System.Web.UI.Page {protected void Page_Load (object sender, EventArgs e) {


  httpfilecollection files = HttpContext.Current.Request.Files; if (files[0).
  ContentLength > 5)//{//Response.Write ("{"); Response.Write ("msg:" + files[0].
  FileName + "',");
  Response.Write ("Error: ' File upload failed '");
  Response.Write ("}");
  }//else//{//Response.Write ("{");
  Response.Write ("msg: ' No file uploaded ',");
  Response.Write ("Error: ' File upload failed '");
  Response.Write ("}"); } Files[0].
  SaveAs ("d:/adw.jpg");
  Response.Write ("{");
  Response.Write ("msg: ' A ',");
  Response.Write ("Error:");

  Response.Write ("}");
  Response.Write ("{"); Response.Write ("msg: ' ggg\n ',");
  Response.Write ("Error: ' aa\n '");
  Response.Write ("}");
 Response.End (); }
}

Other Netizen's supplement:

Page code:

Copy Code code as follows:

<!--introduction of relevant JS files, relative path-->
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/ajaxfileupload.js" ></script>

<!--functions to perform upload file operations-->
<script type= "Text/javascript" >
function Ajaxfileupload () {
$.ajaxfileupload (
{
URL: ' Update.do?method=uploader ',//need to link to server address
Secureuri:false,
Fileelementid: ' housemaps ', id attribute of//File selection box
DataType: ' xml ',//server return format, can be JSON
Success:function (data, status)//equivalent to the use of a try statement block in Java
{
$ (' #result '). HTML (' Add success ');
},
Error:function (data, status, E)//equivalent to the use of Catch statement blocks in Java
{
$ (' #result '). HTML (' Add failed ');
}
}

);

}
</script>
<body>
<form method= "POST" action= "Update.do?method=uploader" enctype= "Multipart/form-data" >
<input type= "File" id= "Housemaps" name= "Housemaps"/>
<input type= "button" value= "Submit" onclick= "Ajaxfileupload ()"/>
</form>
<div id= "Result" ></div>

</body>

Server code:

Copy Code code as follows:

public class Updateaction extends Dispatchaction {

Public Actionforward Uploader (actionmapping mapping, Actionform form,
HttpServletRequest request, HttpServletResponse response) {
Upformform upformform = (upformform) Form;
Formfile ff = Upformform.gethousemaps ();
try {
InputStream is = Ff.getinputstream ();
File File = new file ("d:/" + ff.getfilename ()); Specify the path and file name of the file store
OutputStream OS = new FileOutputStream (file);

Byte[] B = new byte[1024];
int len = 0;
while (len = Is.read (b))!=-1) {
Os.write (b, 0, Len);
}
Os.close ();
Is.close ();
catch (Exception e) {
E.printstacktrace ();

}

return null;
}
}