JQuery AJAX从窗体发送文件数组 [英] JQuery AJAX sending files array from form

问题描述

我得到这个代码的地方上传图片，而不刷新浏览器。然而，我不喜欢上传文件，所以我决定使用我曾经使用的旧文件。问题是，它是从JavaScript文件发送一个数组而不是一个字符串（它被打算发送多个文件，而不是只有一个）。这是使数组的代码：

$ p $ 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 [] ）;
}}}

if（formdata）{
$ .ajax（{
url：img_upload.php，
type： POST，
data：formdata，
processData：false，
contentType：false
}）。done（function（res）{
/ * *** show上传的项目*** * /
/ * ***显示响应*** * /
}）;
}


我在Javascript中的知识非常薄弱，我无法找到如何修改这个cod我发送上传的文件本身，而不是一个数组。

我独立尝试这些，但他们都没有工作（send_img是窗体名称/编号） p>

  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）; 
  

我也尝试删除来使用相同的密钥（0），但它不工作的方式。
img_upload.php的精简代码是：

$ p $ $ $ $ $ fileName $ target。 $ _FILES [ uploaded_file] [ 名称];
$ 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/

网站使用西班牙语，如果需要的话可以翻译成英文。此外，该链接包括一个实例和源代码下载。

问候。

I got this code somewhere to upload pics without refreshing the browser. However I didn't like the uploader file so I decided to use the old one I used to work with. The problem is that it is sending an array instead of a string from the javascript file (it was intended to be sent multiple files instead of only one). Here is the code that makes the array:

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 *** */
            });
    }

My knowledge in Javascript is really weak and I can't find out how to modify this code to send the uploaded file by itself instead of an array.

I tried these independently, but none of them worked (send_img is the form name/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);

I also tried eliminating the for to use the same key (0) but it doesn't work that way. The condensed code for img_upload.php is:

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

How can I send the uploaded file (or header or whatever it is supposed to send) in just one string and, in case of a second file being added, replace the first one instead of creating a second value in the array?

解决方案

The problem is not your logic, the problem is that files cannot be uploaded via ajax.

But maybe you will ask, how did others do? Well, try a form plugin (another .js that works with jQuery)

I found this for you, it works using 'submit' method but maybe you can do a submit when input change or find other kind of solution with javascript actions.

Check this: http://www.miguelmanchego.com/2009/subir-archivos-usando-ajax-jquery/

Website is in Spanish but translate it to English if you need. Also that link includes a live example and source-code download.

Regards.

这篇关于JQuery AJAX从窗体发送文件数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！