JQuery AJAX从表单发送文件数组

时间:2012-01-24 18:01:09

标签: jquery file-upload ajax-forms

我在某处上传了这段代码,无需刷新浏览器即可上传图片。但是我不喜欢上传器文件所以我决定使用我曾经使用的旧文件。问题是它是从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");

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

网站使用西班牙语,但如果需要,请将其翻译为英语。该链接还包括实例和源代码下载。

问候。

答案 1 :(得分:0)

以下是我可以上传文件的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