Of Stack

php+ajax Realization of File Upload without Refresh of ajaxuploadfile

  • 2021-09-11 19:46:25
  • OfStack

This article example for everyone to share php + ajax to achieve no refresh file upload the specific code, for your reference, the specific content is as follows

Form format for file upload 


<form id="uploadform" enctype="multipart/form-data" name="uploadform" method="post" >
  <input id="fileToUpload" type="file" name="fileToUpload" class="uploadinput" >
  <input id="add_file" type="button" value=" Submit ">
</form>

AjaxFileUpload realizes asynchronous uploading of files with better effect and is easy 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(){  
   // Load icon  
   /* $("#loading").ajaxStart(function(){
   $(this).show();
   }).ajaxComplete(function(){
   $(this).hide();
   });*/
   // Upload a file 
  $.ajaxFileUpload({
   url:'upload.php',// Processing Picture Scripts 
   secureuri :false,
   fileElementId :'fileToUpload',//file Control id
   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;
  }) 
 })
 </script>
  <body>
   <input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input">
   <button id="buttonUpload"> Upload </button>
  </body>
 </html>

Upload can also pass parameters: 


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

   },
   error: function (data) {
    alert("error");
   }
  });

Description of main parameters:

1. url indicates the file path for processing file upload operation. You can test whether 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 is enabled for secure submission, the default is false
4. dataType data, 1. Select the original ecology of json and javascript
5. Post-processing function of success successful submission
6. error Commit Failure Handler

Need to know the relevant error tips

1. SyntaxError: missing; before statement Error

If this error occurs, you need to check whether the url path is accessible

2. SyntaxError: syntax error Error

If this error occurs, you need to check for syntax errors in the PHP file that handles the commit 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, it is necessary to check whether the file domain name is 1 or does not exist

5. Other custom errors

You can use the variable $error to print directly to check whether the parameters are correct, which is much more convenient than the above invalid error prompts.

Related articles: