html5支持ajax和jQuery吗,使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery)...

使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery)

诚然，Stack Overflow上有类似的问题，但似乎并不能满足我的要求。

这是我要做的：

上传整个数据形式，其中一个是单个文件

使用Codeigniter的文件上传库

直到这里，一切都很好。 数据在我的数据库中需要。 但我也想通过AJAX的帖子提交我的表单：

使用本机HTML5文件API，而不是flash或iframe解决方案

最好与低级别的.ajax() jQuery方法进行接口

我想我可以想象如何通过自动上传文件，当字段的值改变使用纯粹的JavaScript，但我宁愿这一切都一一提交在jQuery中。 我认为不可能通过查询字符串进行操作，因为我需要传递整个文件对象，但是在这一点上我有点迷茫。

这可以实现吗

Admittedly, there are similar questions lying around on Stack Overflow, but it seems none quite meet my requirements.

Here is what I'm looking to do:

Upload an entire form of data, one piece of which is a single file

Work with Codeigniter's file upload library

Up until here, all is well. The data gets in my database as I need it. But I'd also like to submit my form via an AJAX post:

Using the native HTML5 File API, not flash or an iframe solution

Preferably interfacing with the low-level .ajax() jQuery method

I think I could imagine how to do this by auto-uploading the file when the field's value changes using pure javascript, but I'd rather do it all in one fell swoop on for submit in jQuery. I'm thinking it's not possible to do via query strings as I need to pass the entire file object, but I'm a little lost on what to do at this point.

Can this be achieved?

原文：https://stackoverflow.com/questions/4006520

更新时间：2019-11-21 21:18

最满意答案

这不是太难了 首先，看看FileReader接口 。

所以，当提交表单时，抓住提交过程

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file

var reader = new FileReader();

reader.readAsText(file, 'UTF-8');

reader.onload = shipOff;

//reader.onloadstart = ...

//reader.onprogress = ...

//reader.onabort = ...

//reader.onerror = ...

//reader.onloadend = ...

function shipOff(event) {

var result = event.target.result;

var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'

$.post('/myscript.php', { data: result, name: fileName }, continueSubmission);

}

然后，在服务器端(即myscript.php)：

$data = $_POST['data'];

$fileName = $_POST['name'];

$serverFile = time().$fileName;

$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting

fwrite($fp, $data);

fclose($fp);

$returnData = array( "serverFile" => $serverFile );

echo json_encode($returnData);

或者像这样的东西。 我可能会错误(如果我是，请纠正我)，但是这应该将文件存储在您的服务器上的/uploads/ ，像一个JSON变量(到continueSubmission()函数)在服务器上包含fileName。

查看fwrite()和jQuery.post() 。

在上面的页面，它详细介绍了如何使用readAsBinaryString() ， readAsDataUrl()和readAsArrayBuffer()来满足您的其他需求(例如图像，视频等)。

It's not too hard. Firstly, take a look at FileReader Interface.

So, when the form is submitted, catch the submission process and

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file

var reader = new FileReader();

reader.readAsText(file, 'UTF-8');

reader.onload = shipOff;

//reader.onloadstart = ...

//reader.onprogress = ...

//reader.onabort = ...

//reader.onerror = ...

//reader.onloadend = ...

function shipOff(event) {

var result = event.target.result;

var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'

$.post('/myscript.php', { data: result, name: fileName }, continueSubmission);

}

Then, on the server side (i.e. myscript.php):

$data = $_POST['data'];

$fileName = $_POST['name'];

$serverFile = time().$fileName;

$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting

fwrite($fp, $data);

fclose($fp);

$returnData = array( "serverFile" => $serverFile );

echo json_encode($returnData);

Or something like it. I may be mistaken (and if I am, please, correct me), but this should store the file as something like 1287916771myPicture.jpg in /uploads/ on your server, and respond with a JSON variable (to a continueSubmission() function) containing the fileName on the server.

On the above page it details how to use readAsBinaryString(), readAsDataUrl(), and readAsArrayBuffer() for your other needs (e.g. images, videos, etc).

相关问答

使用jquery.form插件，可以非常简单地执行您想要的操作： HTML：

...

这不是太难了 首先，看看FileReader接口 。 所以，当提交表单时，抓住提交过程 var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file

var reader = new FileReader();

reader.readAsText(file, 'UTF-8');

reader.onload = shipOff;

//reader.onloadstart = ...

//reader.onp

...

您需要在服务器上运行的脚本将文件移动到uploads目录。 jQuery ajax方法(在浏览器中运行)将表单数据发送到服务器，然后服务器上的脚本处理上传。 以下是使用PHP的示例。 你的HTML是好的，但更新你的JS jQuery脚本看起来像这样： $('#upload').on('click', function() {

var file_data = $('#sortpicture').prop('files')[0];

var form_data = new Form

...

你有一个闭包问题，使用this代替xhr来引用事件回调中的当前XMLHttpRequest对象; function(e){

showUploadedItem(file, this.id);

});

function(e) {

var done = e.position || e.loaded, total = e.totalSize || e.total;

$("#" + this.id).attr('value', Math.floor((e.loaded / e.to

...

这是一个混乱的方式，但它可能会给你一个很好的起点： 它会为您的输入添加一个数组，该数组将在内存中保留添加的文件。 // The multiUp function will be called each time our hidden input is changed

document.querySelector('input').addEventListener('change', multiUp, false);

function multiUp(e){

// if it's th

...

在FormData对象之后这行是什么意思？ fd.append("file", document.getElementById('file').files[0]);

document.getElementById('file')通过其ID获取元素。 element.files[0]从元素中获取第一个选定的文件。 fd.append("file", file)将其附加到FormData实例，其字段名称为file 。 稍后将fd作为multi

...

出于某种原因，问题出在formData变量上，之前定义如下： var formData = new FormData($('.form-uploadXLS')[0]);

我把索引改为1就像这样.. var formData = new FormData($('.form-uploadXLS')[1]);

..由于某种原因，它现在有效。 For some reason the problem was with the formData variable, previously defined a

...

我不确定文件上传是否适用于文件读取器，但有一种不同的方法可以使它工作： var formData = new FormData($(".file_upload_form")[0]);

$.ajax({

url: "upload_file.php", // server script to process data (POST !!!)

type: 'POST',

xhr: function() { // custom xhr

myXhr = $.ajaxSe

...

嗯，我认为有可能，根据JayC回答的这个问题 您所谈论的是HTML5文件API。 我不确定描述它的最佳链接是什么，但这可能有所帮助。 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications 这个问题也许可以帮到你 Well, I think it is possible, according to this question answered by JayC What you're talking abo

...