多个文件上传器，与现有表单很好地集成 [英] Multiple files uploader that integrates well with existing form

问题描述

我知道这个问题可能过于笼统，但花了整整一天的时间后，我在这个问题上迷失了方向。

任何人都知道uploader插件，将与现有表单轻松整合？

我尝试过的所有上传器插件 - jQuery File Upload，Plupload，Uploadify，Dropzone.js - 对于文件提交，但不可能整合到现有的表格 - 通常他们需要队列中的一些文件提交表格，有麻烦提交其他表单域等。

我需要一些简单的事情：用户填写表单，在拖放区拖动文件（或者不，如果他不想提交）并提交表单。我甚至不需要Ajax表单提交（尽管我希望拥有它）。

任何提示？

 解析方案

当您剥离附加功能时，AJAX文件上传相当简单： var fd = new FormData（form）;

var xhr = new XMLHttpRequest（）;

xhr.upload.addEventListener（progress，function（e）{
// Handle progress
}，false）;

xhr.addEventListener（load，function（e）{
if（xhr.status == 200）{
//处理成功
} else {
//亨德尔错误
}
}，false）;

xhr.addEventListener（error，function（e）{
//处理错误
}，false）;

xhr.addEventListener（abort，function（e）{
// Handle abort
}，false）;

尝试{
xhr.open（'POST'，'http://server.com/uploader.php'，true）;
xhr.send（fd）;
} catch（e）{
//处理错误
}


I know this question might be too generic, but after spending whole day with it I'm pretty lost on this one.

Anyone knows of uploader plugin, that would integrate easily with existing form?

All the uploader plugins I tried - jQuery File Upload, Plupload, Uploadify, Dropzone.js - work great for files submission, but are impossible to integrate into existing form - usually they require some files in the queue to submit the form at all, have troubles to submit other form fields etc.

I need something as simple as: the user fills the form, drags the files on the dropzone (or doesn't, if he doesn't want to submit any) and submits the form. I don't even need Ajax form submission (altough I would like to have it).

Any tips?

解决方案

AJAX file uploads are fairly easy when you strip away the extra features:

var fd = new FormData(form);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function(e) {
    // Handle progress
}, false);

xhr.addEventListener("load", function(e) {
    if( xhr.status == 200 ) {
        // Handle success
    } else {
        // Handel error
    }
}, false);

xhr.addEventListener("error", function(e) {
    // Handle error
}, false);

xhr.addEventListener("abort", function(e) {
    // Handle abort
}, false);

try {
    xhr.open('POST', 'http://server.com/uploader.php', true);
    xhr.send(fd);
} catch(e) {
    // Handle error
}

这篇关于多个文件上传器，与现有表单很好地集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！