我設(shè)計了一個簡單的表單，允許用戶將文件上傳到服務(wù)器。最初，表單包含一個“瀏覽”按鈕。如果用戶想要上傳多個文件，他需要點擊“添加更多文件”按鈕，在該表單中添加另一個“瀏覽”按鈕。提交表單后，文件上載過程將在“upload.php”文件中處理。它適用于上傳多個文件?，F(xiàn)在我需要使用jQuery的'.submit（）'提交表單，并將'ajax ['.ajax（）']請求發(fā)送到'upload.php'文件來處理文件上傳。這是我的HTML表單：<form enctype="multipart/form-data" action="upload.php" method="post"> <input name="file[]" type="file" /> <button class="add_more">Add More Files</button> <input type="button" id="upload" value="Upload File" /></form>這是JavaScript：$(document).ready(function(){ $('.add_more').click(function(e){ e.preventDefault(); $(this).before("<input name='file[]' type='file' />"); });});以下是處理文件上傳的代碼：for($i=0; $i<count($_FILES['file']['name']); $i++){$target_path = "uploads/";$ext = explode('.', basename( $_FILES['file']['name'][$i]));$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) { echo "The file has been uploaded successfully <br />";} else{ echo "There was an error uploading the file, please try again! <br />";}}關(guān)于如何編寫'.submit（）'函數(shù)的任何建議都會非常有用。
3 回答
MM們
TA貢獻(xiàn)1886條經(jīng)驗 獲得超2個贊
最后，我通過使用以下代碼找到了解決方案：
$('body').on('click', '#upload', function(e){
e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
success: function (data) {
alert("Data Uploaded: "+data);
},
data: formData,
cache: false,
contentType: false,
processData: false
});
return false;
});
一只名叫tom的貓
TA貢獻(xiàn)1906條經(jīng)驗 獲得超3個贊
HTML
<form enctype="multipart/form-data" action="upload.php" method="post">
<input name="file[]" type="file" />
<button class="add_more">Add More Files</button>
<input type="button" value="Upload File" id="upload"/>
</form>
使用Javascript
$(document).ready(function(){
$('.add_more').click(function(e){
e.preventDefault();
$(this).before("<input name='file[]' type='file'/>");
});
});
用于ajax上傳
$('#upload').click(function() {
var filedata = document.getElementsByName("file"),
formdata = false;
if (window.FormData) {
formdata = new FormData();
}
var i = 0, len = filedata.files.length, img, reader, file;
for (; i < len; i++) {
file = filedata.files[i];
if (window.FileReader) {
reader = new FileReader();
reader.onloadend = function(e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("file", file);
}
}
if (formdata) {
$.ajax({
url: "/path to upload/",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function(res) {
},
error: function(res) {
}
});
}
});
PHP
for($i=0; $i<count($_FILES['file']['name']); $i++){
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];
if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
echo "The file has been uploaded successfully <br />";
} else{
echo "There was an error uploading the file, please try again! <br />";
}
}
/**
Edit: $target_path variable need to be reinitialized and should
be inside for loop to avoid appending previous file name to new one.
*/
請使用上面的腳本腳本進(jìn)行ajax上傳。它會工作
qq_花開花謝_0
TA貢獻(xiàn)1835條經(jīng)驗 獲得超7個贊
我的解決方案
假設(shè)表單id =“my_form_id”
它從HTML中檢測表單方法和表單操作
jQuery代碼
$('#my_form_id').on('submit', function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
var msg_error = 'An error has occured. Please try again later.';
var msg_timeout = 'The server is not responding';
var message = '';
var form = $('#my_form_id');
$.ajax({
data: formData,
async: false,
cache: false,
processData: false,
contentType: false,
url: form.attr('action'),
type: form.attr('method'),
error: function(xhr, status, error) {
if (status==="timeout") {
alert(msg_timeout);
} else {
alert(msg_error);
}
},
success: function(response) {
alert(response);
},
timeout: 7000
});
});
- 3 回答
- 0 關(guān)注
- 1017 瀏覽
添加回答
舉報
0/150
提交
取消