JQuery AJAX从表单发送文件数组

我把这个代码放在某个地方上传图片而不刷新浏览器。 但是我不喜欢上传器文件所以我决定使用我曾经使用的旧文件。 问题是它是从javascript文件发送一个数组而不是一个字符串(它的目的是发送多个文件而不是一个文件)。 以下是制作数组的代码:

input.addEventListener("change", function (evt) { document.getElementById("response").innerHTML = "Loading . . ." var i = 0, len = this.files.length, img, reader, file; for ( ; i < len; i++ ) { file = this.files[i]; if (formdata) { formdata.append("uploaded_file[]", file); } } } if (formdata) { $.ajax({ url: "img_upload.php", type: "POST", data: formdata, processData: false, contentType: false }).done(function (res) { /* *** show uploaded item *** */ /* *** show response *** */ }); } 

我在Javascript方面的知识非常薄弱,我无法找到如何修改此代码以自行发送上传文件而不是数组。

我独立尝试了这些,但没有一个工作(send_img是表单名称/ id):

 formdata = document.send_img.uploaded_file.value; formdata = document.getElementById("uploaded_file"); formdata = new formdata ($('#send_img')); formData = $('#send_img').serialize(); formdata.replaceWith("uploaded_file[]", file); 

我也试过消除for使用相同的键(0),但它不起作用。 img_upload.php的精简代码是:

 $fileName = $target . $_FILES["uploaded_file"]["name"]; $fileTmpLoc = $_FILES["uploaded_file"]["tmp_name"]; $fileName = $new_name . "." . $fileExt; move_uploaded_file($fileTmpLoc, "images/images/temp/$fileName"); 

如何在一个字符串中发送上传的文件(或标题或其应该发送的任何内容),如果添加第二个文件,则替换第一个文件而不是在数组中创建第二个值?

问题不是你的逻辑,问题是无法通过ajax上传文件。

但也许你会问,其他人怎么办? 好吧,尝试一个表单插件(另一个与jQuery一起使用的.js)

我找到了这个,它使用’submit’方法,但也许你可以在输入更改时进行提交或使用javascript操作找到其他类型的解决方案。

请查看: http : //www.miguelmanchego.com/2009/subir-archivos-usando-ajax-jquery/

网站是西class牙语,但如果您需要,可将其翻译成英语。 该链接还包括实例和源代码下载。

问候。

下面是我的ajax设置,可以上传文件

 method: "POST", url: url, headers: { 'Content-Type': undefined }, transformRequest: function (data, headersGetter) { var formData = new FormData(); angular.forEach(data, function (value, key) { if (Array.isArray(value)) { // To save array of items angular.forEach(value, function (value1, key1) { if (value1.constructor.name != "File") { angular.forEach(value1, function (value2, key2) { formData.append(key + '[' + key1 + '].' + key2, value2); }); } }); } else { formData.append(key, value); } }); return formData; }, enctype: 'multipart/form-data', dataType: 'json', traditional: true, data: data, cache: false, processData: false, contentType: false 
Interesting Posts