JavaScript：上传文件

187

假设我在页面上有此元素：

<input id="image-file" type="file" />

这将创建一个按钮，允许网页用户通过浏览器中的OS“文件打开...”对话框选择文件。

假设用户单击该按钮，在对话框中选择一个文件，然后单击“确定”按钮以关闭对话框。

现在，所选文件名存储在：

document.getElementById("image-file").value

现在，假设服务器在URL“ / upload / image”处处理多部分POST。

如何将文件发送到“ / upload / image”？

另外，我该如何监听文件上传完成的通知？

javascript file-upload

— YummyBánhMì
source

JavaScript不处理上载，因为它是在服务器端。服务器端脚本将接收该文件，然后将其移动。对于从临时文件夹到所需文件夹的php。

— Bakudan）

我在这里找到了使用PHP的不错的解决方案

— mld 2014年

投票决定重新开放，因为该问题是关于POJS（普通的旧javascript）而不是jQuery的。

— e2-e4

Answers:

除非您尝试使用ajax上传文件，否则只需将表单提交到即可/upload/image。

<form enctype="multipart/form-data" action="/upload/image" method="post">
    <input id="image-file" type="file" />
</form>

如果您确实想在后台上传图像（例如，无需提交整个表单），则可以使用ajax：

— 马特·鲍尔
source

或iframe 0x0大小，并在其src =“”中包含图像上传器脚本，然后使用target =“ iframeId”将表单发布到表单上，并在iframe src .load事件中读取结果，例如可以使用jQuery绑定。

— 德米特里（Dmitry）2013年

如今，实际上可以通过Javascript和Ajax进行投票，请参阅：stackoverflow.com/a/10811427/694469 （我没有投票）。

— KajMagnus

@KajMagnus，您可能的意思是“上传”，但无意中说了“上传”

— Samuel Allan

纯JS

您可以选择将获取与await-try-catch一起使用

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

显示代码段

async function SavePhoto(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Before selecting the file open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(in stack overflow snippets there is problem with error handling, however in <a href="https://jsfiddle.net/Lamik/b8ed5x3y/5/">jsfiddle version</a> for 404 errors 4xx/5xx are <a href="https://stackoverflow.com/a/33355142/860099">not throwing</a> at all but we can read response status which contains code)

展开摘要

守旧派的方法-XHR

let photo = document.getElementById("image-file").files[0];  // file from input
let req = new XMLHttpRequest();
let formData = new FormData();

formData.append("photo", photo);                                
req.open("POST", '/upload/image');
req.send(formData);

显示代码段

function SavePhoto(e) 
{
    let user = { name:'john', age:34 };
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let photo = e.files[0];      
    
    formData.append("user", JSON.stringify(user));   
    formData.append("photo", photo);
    
    xhr.onreadystatechange = state => { console.log(xhr.status); } // err handling
    xhr.open("POST", '/upload/image');    
    xhr.send(formData);
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Choose file and open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(the stack overflow snippets, has some problem with error handling - the xhr.status is zero (instead of 404) which is similar to situation when we run script from file on <a href="https://stackoverflow.com/a/10173639/860099">local disc</a> - so I provide also js fiddle version which shows proper http error code <a href="https://jsfiddle.net/Lamik/k6jtq3uh/2/">here</a>)

展开摘要

摘要

在服务器端，您可以读取原始文件名（和其他信息），该文件名会自动包含在浏览器中的filenameformData参数中以供请求。
您不需要将请求标头设置Content-Type为multipart/form-data-浏览器会自动将其设置。
而不是/upload/image您可以使用完整的地址，例如http://.../upload/image。
如果要在单个请求中发送许多文件，请使用multipleattribute <input multiple type=... />：，并以类似方式将所有选择的文件附加到formData（例如photo2=...files[2];... formData.append("photo2", photo2);）
您可以通过以下方式包括其他数据（json）以进行请求let user = {name:'john', age:34}：formData.append("user", JSON.stringify(user));
该解决方案应可在所有主要浏览器上使用。

— 卡米尔（KamilKiełczewski）
source

为我完美地工作。

— Trieu Nguyen

formData ===表单提交enctype="multipart/form-data"

— xgqfrms

我遇到了错误net::ERR_ABORTED 405 (Method Not Allowed)

— Hidayt Rahman

@HidaytRahman这个错误通常在您未为您的网址实施POST方法时出现

— KamilKiełczewski

很奇怪-根据您的标题，我认为我们不再需要服务器：D

— Hidayt Rahman