Home > Article > php教程 > AjaxFileUpload implements asynchronous file upload (AjaxFileUpload.js file download and parameter introduction)

AjaxFileUpload implements asynchronous file upload (AjaxFileUpload.js file download and parameter introduction)

高洛峰Original: 2016-12-12 17:38:151323browse

AjaxFileUpload achieves better asynchronous file uploading and is simple to use:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="ajaxfileupload.js"></script>
    </head>
<script>
jQuery(function(){   
  $("#buttonUpload").click(function(){     
     //加载图标   
     /* $("#loading").ajaxStart(function(){
        $(this).show();
     }).ajaxComplete(function(){
        $(this).hide();
     });*/
      //上传文件
    $.ajaxFileUpload({
        url:&#39;upload.php&#39;,//处理图片脚本
        secureuri :false,
        fileElementId :&#39;fileToUpload&#39;,//file控件id
        dataType : &#39;json&#39;,
        success : function (data, status){
            if(typeof(data.error) != &#39;undefined&#39;){
                if(data.error != &#39;&#39;){
                    alert(data.error);
                }else{
                    alert(data.msg);
                }
            }
        },
        error: function(data, status, e){
            alert(e);
        }
})
return false;
  }) 
})
</script>
    <body>
        <input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input">
        <button id="buttonUpload">上传</button>
    </body>
</html>

Upload can also pass parameters:

var data = { name: &#39;my name&#39;, description: &#39;short description&#39; } 
    $.ajaxFileUpload({
        url: &#39;upload.php&#39;,
        secureuri: false,
        data: data,
        fileElementId: &#39;fileToUpload&#39;,
        dataType: &#39;json&#39;,
        success: function (data) {
            alert(data.msg);
 
        },
        error: function (data) {
            alert("error");
        }
    });

Main parameter description:
1. url represents the file path for processing file upload operations. You can test whether the URL can be used in the browser Direct access, 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 ecosystem of javascript
5 , processing function after successful submission
6, error processing function for failed submission

You 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 the PHP file processing the submission operation has syntax errors

3, SyntaxError: invalid property id error
If this error occurs, you need to check whether the property 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 directly print to check whether each parameter is correct, such as It is much more convenient to get rid of the above invalid error prompts.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：ajaxFileUpload asynchronous file upload simple to useNext article：ajaxFileUpload asynchronous file upload simple to use

See more

AjaxFileUpload implements asynchronous file upload (AjaxFileUpload.js file download and parameter introduction)

Related articles