小编典典

在AJAX和jQuery中使用HTML5文件上传

javascript

诚然,Stack Overflow上也存在类似的问题,但似乎没有一个完全符合我的要求。

这是我想要做的:

  • 上传完整的数据形式,其中一个是 单个 文件
  • 使用Codeigniter的文件上传库

到这里为止,一切都很好。数据根据需要进入我的数据库。但我也想通过AJAX帖子提交表单:

  • 使用原生HTML5 File API,而不是Flash或iframe解决方案
  • 最好与低级.ajax()jQuery方法接口

我想我可以想象如何通过使用纯JavaScript来在字段的值更改时自动上传文件来实现此目的,但我宁愿一举完成,就可以在jQuery中提交。我认为无法通过查询字符串进行操作,因为我需要传递整个文件对象,但是此时我有点不知所措。

能做到吗?


阅读 391

收藏
2020-05-01

共1个答案

小编典典

不太难。首先,看一下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 = ... <-- Allows you to update a progress bar.
//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);

或类似的东西。我可能会弄错(如果我愿意,请纠正我),但这应将文件存储为1287916771myPicture.jpgin
/uploads/在您的服务器上,并continueSubmission()在服务器上使用包含fileName的JSON变量(对函数)进行响应。

签出fwrite()jQuery.post()

在上一页中,它详细说明了如何使用readAsBinaryString()readAsDataUrl()readAsArrayBuffer()满足您的其他需求(例如图像,视频等)。

2020-05-01