AjaxFileUpload implements asynchronous file upload (AjaxFileUpload.js file download and parameter introduction)-PHP开发-php.cn

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

高洛峰

Release： 2016-12-12 17:38:15

Original

1368 people have browsed it

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>

Copy after login

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

Copy after login

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.