ajaxfileupload上傳文件
⑴ 如何使用ajax實現文件上傳
使用 Ajax 實現文件上傳的主要步驟如下：
1. 創建 HTML 表單：設置包含文件選擇器和提交按鈕的表單。
2. 引入 AJAX 庫：為簡化操作，通常會引入 jQuery 或者 Axios 庫。
3. 編寫 AJAX 代碼：使用 XMLHttpRequest 或者庫函數發起文件上傳請求。
4. 配置請求：設置請求類型（POST 或者 PUT）、伺服器端點和請求頭。請求頭需要包含用於處理文件上傳的參數，如 Content-Type 和邊界參數。
5. 發送文件：將文件作為二進制數據發送到伺服器。
6. 處理伺服器響應：接收伺服器返回的數據，進行相應的操作，如顯示上傳結果或錯誤信息。
以下是使用 jQuery 的 Ajax 上傳文件的簡化代碼示例：
HTML 表單：
上傳文件
javaScript 代碼：
javascript
$(document).ready(function () {
$("#fileUploadForm").submit(function (event) {
event.preventDefault();
var formData = new FormData();
formData.append("file", $("#fileInput")[0].files[0]);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (response) {
console.log(response);
// 處理伺服器響應，顯示上傳結果或錯誤信息
},
error: function () {
console.log("上傳失敗");
// 處理上傳失敗情況
},
});
});
});
在這個示例中，我們使用 jQuery 的 `ajax` 函數發起文件上傳請求，並將文件作為 FormData 對象的一部分發送到伺服器端點 "upload.php"。伺服器端需要配置為接收並處理文件上傳。
通過以上步驟和示例代碼，你可以實現使用 Ajax 來上傳文件的功能。根據具體需求和伺服器端實現，可能還需要進行額外的配置和操作。
⑵ jquery的post方法上傳文件問題。
用jQuery 的Ajax文件上傳的組件：ajaxfileupload.js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php', //你處理上傳文件的服務端
secureuri:false,
fileElementId:'img',
dataType: 'json',
success: function (data)
{
alert(data.file_infor);
}
}
)
return false;
}
</script>
<input id="img" type="file" size="45" name="img" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
⑶ ajax怎麼提交帶文件上傳表單
上傳的文件是沒有辦法和表單內容一起非同步的，可考慮使用jquery的ajaxfileupload,或是其他的插件，非同步上傳文件後，然後再對表單進行操作。
⑷ 使用ajaxFileUpload這個控制項上傳文件，返回json數據出錯
用這個東西返回的data其實與一般ajax返回的不同，因為它本身就是一個模擬ajax的操作，所以只不過是對用iframe的onload事件對返回的response進行截取......
⑸ jquery 用a標簽控制文件上傳
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ajaxFileUpload文件上傳例子</title>
<scripttype="text/javascript"src="<%=baseURL%>/kinth/js/ajaxfileupload.js"></script>
<scripttype="text/javascript">
varflag=0;//flag作用：分兩種情況提交信息，如果是修改操作，沒有修改上傳文件，只修改其他欄位的信息時點保存也能提交信息
functionuploadFile(){
$.ajaxFileUpload({
url:baseURL+"/fileCatalog.do?method=save",//需要鏈接到伺服器地址
secureuri:true,
fileElementId:'file',//文件選擇框的id屬性
success:function(data,status){
varresults=$(data).find('body').html();
varobj=eval("("+results+")");
$("#fileSize").val(obj.fileSize);
$("#fileUrl").val(obj.fileUrl);
$('#fileCatalogForm').submit();
},error:function(data,status,e){
showDialogWithMsg('ideaMsg','提示','文件錯誤！');
}
});
}
functiongetFileName(obj)
{
flag=1;
varpos=-1;
if(obj.value.indexOf("/")>-1){
pos=obj.value.lastIndexOf("/")*1;
}elseif(obj.value.indexOf("\")>-1){
pos=obj.value.lastIndexOf("\")*1;
}
varfileName=obj.value.substring(pos+1);
$("#fileName").val(fileName);
$('.files').text(fileName);
}
functionev_save(){
if(submitMyForm('fileCatalogForm')){
if(flag==0){
$('#fileCatalogForm').submit();
}else{
uploadFile();
}
}
}
functionev_back(){
window.location.href=baseURL+'/fileCatalog.do?method=list';
}
</script>
</head>
<body>
<html:formstyleId="fileCatalogForm"action="/fileCatalog.do?method=save&fileFlag=true"method="post"enctype="application/x-www-form-urlencoded"style="text-align:left;">
<table>
<tr>
<td>附件上傳：</td>
<tdstyle="text-align:left;"id="fileTd">
<inputtype="file"name="file"id="file"onChange="getFileName(this);"/><br/>
</td>
<tdcolspan="2"class="tdr">
<olclass=files>
<c:iftest="${entity.resourceId!=null&&entity.resourceId!=''}"><li>${entity.fileName} 上傳成功</li></c:if>
</ol>
</td>
</tr>
<c:iftest="${entity.resourceId==null||entity.resourceId==''}">
<inputtype="text"name="fileSize"id="fileSize">
</c:if>
<inputtype="hidden"id="fileUrl"name="fileUrl"value="${entity.fileUrl}"
</table>
</html:form>
</body>