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:

98a409b4e0dd20993c98e99a88ced0d82cacc6d41bbb37262a98f745aa00fbf0
c1a507ce4e25efe7d9a05acf2ed209252cacc6d41bbb37262a98f745aa00fbf0

2. HTML part

Copy code The code is as follows:

89b25275b4a8bb4532c41a2aa8161b05
11091c232b6ac165cead5133eec293a5
bec745fb82b804114c56a91be37fec35Upload65281c5ac262bf6d81768915a4a77ac0

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:

cc59bea3adee72cab5ddc898397ea2f4
...Related html code...
f5a47148e367a6035fd7a2faa965022e
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:

100db36a723c770d327fc0aef2ce13b1
70616a1413412830abe8d2aba48f5c2b
0c54930bea48f598f730c6be244850d72cacc6d41bbb37262a98f745aa00fbf0
         a787e67392ba4615922d8cf7af8591d02cacc6d41bbb37262a98f745aa00fbf0

228d6f4464041b5a5f4e2befc8cfbf35
        4ec11beb6c39d0703d1751d203c17053
            function ajaxFileUpload(){
$.ajaxFileUpload(
                                                        {
Url: 'update.do? Method = uploader', // need to link to the server address
secureuri:false,
FileElementid: 'Housemaps', // The ID attribute of the file selection box
DataType: 'xml', 'xml'                            success: function (data, status)                                                                                                                                                                                                                                                                                                                                                                                       $('#result').html('Added successfully');
                 },
Error: Function (data, status, e) // equivalent                                                 {
                            $('#result').html('Add failed');
                }
            }
                                                                          );
                                                                                }
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
7179caff31ba7967e99850a4aa2c3bdf
            bb12889be9509b7c88109280a7655834
           5481467d3c96c8c4e590f8e17fa2b649
f5a47148e367a6035fd7a2faa965022e
ca7204e18f1cb9313f7d7fb65b59687216b28748ea4df4d9c2150843fecfba68
 
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e



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;
    }
}