Home > Article > Backend Development > Detailed explanation of steps to implement php+ajax file upload without refresh
Detailed explanation of steps to implement php+ajax file upload without refresh
- php中世界最好的语言Original
- 2018-05-18 14:54:161849browse
This time I will bring you php ajax without refreshFile uploaddetailed implementation steps, php ajax without refresh file uploadWhat are the precautions, the following is a practical case, one Get up and take a look.
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="提交"> </form>
AjaxFileUpload achieves better asynchronous file upload 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(){
//加载图标
/* $("#loading").ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});*/
//上传文件
$.ajaxFileUpload({
url:'upload.php',//处理图片脚本
secureuri :false,
fileElementId :'fileToUpload',//file控件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">上传</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");
}
});
Main parameter description:
1. url represents the file path of processing file upload operation. 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 processing function for failed submission
Need to understand 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 the PHP file that handles the submission operation Whether there is a syntax error
3. SyntaxError: invalid property id error
If this error occurs, you need to check whether the propertyID 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.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
PHP long connection use case analysis
QQ, WeChat and Alipay three-in-one payment code How to implement
The above is the detailed content of Detailed explanation of steps to implement php+ajax file upload without refresh. For more information, please follow other related articles on the PHP Chinese website!