jquery 请求html文件上传,在AJAX和jQuery中使用HTML5文件上传

小编典典

不太难。首先，看一下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);

或类似的东西。我可能会弄错(如果我愿意，请纠正我)，但这应将文件存储为1287916771myPicture.jpgin

/uploads/在您的服务器上，并continueSubmission()在服务器上使用包含fileName的JSON变量(对函数)进行响应。

签出fwrite()并jQuery.post()。

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

2020-05-01