A simple jQuery plug-in ajaxfileupload.js implements ajax upload file example_jquery

The jQuery plug-in AjaxFileUpload can realize ajax file upload. The plug-in is very simple to use. First, learn how to use the AjaxFileUpload plug-in correctly, and then learn about some common error messages and solutions.

Instructions for use

Need to use jQuery library file and AjaxFileUpload library file

Usage examples

1, including the file part

Copy code The code is as follows:

2. HTML part

Copy code The code is as follows:

Upload

Only three elements are needed, a dynamic loading icon, a file field and a button
Note: Using the AjaxFileUpload plug-in to upload files does not require a form, as follows:

...Related html code...

Because the AjaxFileUpload plug-in will automatically generate a form submission form.

For the file file domain ID and name, the fileElementId parameter of the ajaxFileUpload plug-in needs to obtain the file domain ID. If you process the upload file operation, you need to know the file domain name in order to obtain the uploaded file information. The relationship between the two must be clear.

3, javascript part

<script type="text/javascript"> 
function ajaxFileUpload (){ 
loading();//动态加载小图标 
$.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(); 
}); 
} 
</script> 

Main parameter description:
1. url represents the file path for processing file upload operations. You can test whether the URL can be directly accessed in the browser, as above: upload.php
2. fileElementId represents the file domain ID, as above: fileToUpload
3. Whether secureuri enables secure submission, the default is false
4. dataType data, generally choose json, the original ecology of javascript
5. Processing function after successful submission
6. Error submission failure processing function

There are two methods above, a dynamic loading small icon prompt function loading() and ajaxFileUpload file upload $.ajaxFileUpload() function, which is similar to the jQuery.ajax() function we use. It is very simple to use, and I have omitted it here. PHP handles uploaded files, and it's that simple to use the jQuery plug-in AjaxFileUpload to implement ajax files.

At the same time, we need to know the relevant error prompts

1, SyntaxError: missing; before statement error
If this error occurs, you need to check whether the url path is accessible

2, SyntaxError: syntax error
If this error occurs, you need to check whether there are syntax errors in the PHP file that handles the submission operation

3, SyntaxError: invalid property id error
If this error occurs, you need to check whether the attribute ID exists

4, SyntaxError: missing } in XML expression error
If this error occurs, you need to check whether the file domain name is consistent or does not exist

5, other custom errors
You can use the variable $error to print directly to check whether each parameter is correct, which is much more convenient than the invalid error prompts above.

Using the jQuery plug-in AjaxFileUpload to upload files without refreshing is very practical. Because of its simplicity and ease of use, this plug-in has the largest number of users compared to other file upload plug-ins, so it is highly recommended.

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:'文件上传失败'");
  // Response.Write("}");
  //}
  //else
  //{
  // Response.Write("{");
  // Response.Write("msg:'没有文件被上传',");
  // Response.Write("error:'文件上传失败'");
  // 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();
 }
}

Additional comments from other netizens:

Page code:

Copy code The code is as follows:

        

       

           
          

 





Server code:

Copy code

The code is 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());            //指定文件存储的路径和文件名
            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;
    }
}