模擬前臺html頁面
1.jQuery插件AjaxFileUpload用來實現ajax文件上傳
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="ajaxfileupload.js"></script>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input id="img" type="file" name="img" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
</form>
<div id="showtext"></div>
<img src="" alt="" id="showImg"/>
<script type="text/javascript">
function ajaxFileUpload(){
$.ajaxFileUpload({
url:"upfile.php",
secureuri:false,
fileElementId:'img',
dataType: 'text',
processData:false,
success: function (data) {
document.getElementById('showImg').src=data;
}
})
return false;
}
</script>
</body>
</html>
2.通過jQuery Ajax使用FormData對象上傳文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input id="img" type="file" name="img">
<input type="button" id="button" value="提交">
</form>
<img src="" id="tp"/>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('#button').click(function(){
console.log("111111")
var formData = new FormData();
formData.append("img",document.getElementById('img').files[0]);
console.log(formData);
$.ajax({
type:"post",
url:"upfile.php",
//異步
async:true,
data:formData,
//processData 默認為false，當設置為true的時候,jquery ajax
//Jquery是否對你的數據進行預處理
processData:false,
//Jquery不要修改請求內容類型
contentType:false,
success:function(data){
console.log(data);
document.getElementById('tp').src = data;
}
})
})
</script>
</html>
后臺PHP
<?php
if(!empty($_FILES)){
move_uploaded_file($_FILES['img']['tmp_name'],$_FILES['img']['name']);
echo $_FILES['img']['name'];
}else{
echo "error";
}
?>
jQery Ajax參數
| 參數名 | 類型 | 描述 | |
|---|---|---|---|
| url | string | (默認: 當前頁地址) 發送請求的地址 | |
| type | String | (默認: "GET") 請求方式 ("POST" 或 "GET")， | 默認為 "GET"。 |
| async | Boolean | (默認: true) 默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。 | |
| contentType | String | 告訴服務器從瀏覽器提交過來的數據格式。 | |
| dataType | String | 告訴服務器瀏覽器可以想要返回的數據格式類型，同時JQuery也會根據該類型對返回的數據進行處理,類型: "xml" : 返回 XML 文檔，可用 jQuery 處理。 "html" : 返回純文本 HTML 信息；包含 script 元素 "script" : 返回純文本 JavaScript 代碼。不會自動緩存結果 "json": 返回 JSON 數據 。JQuery將返回的字符串格式數據自動轉化為Javascript對象，便于直接使用obj.property格式訪問 |
|
| processData | Boolean | (默認: true) 默認情況下，發送的數據將被轉換為對象(技術上講并非字符串) 以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。 |
我的博客鏈接
更多資源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io
