Javascript 如何为HTML中输入的文件设置值？

如何设置该值

<input type="file" />

---

由于安全原因，您不能

想象一下：

document.foo.submit；

---

你不希望你访问的网站能够做到这一点，是吗=

你不能。这是一项安全措施。想象一下，如果有人编写JS将文件输入值设置为某个敏感数据文件？

你不能

设置文件输入值的唯一方法是由用户选择文件

---

这样做是出于安全原因。否则，您将能够创建一个JavaScript，自动从客户端计算机上载特定文件。

这不是对您的问题的回答，其他人已经回答了，但如果您想拥有上载文件字段的一些编辑功能，您可能要做的是：

只需打印文件名或URL、可单击的下载链接或图像即可显示此字段的当前值：只需显示，可能为缩略图 用于上载新文件的标记 选中此复选框后，将删除当前上载的文件。请注意，无法上载“空”文件，因此您需要这样的内容来清除字段的值 事实上我们可以做到。 我们可以通过使用FormToMultipartPostData库在c中使用webbrowser控件来设置文件值默认值。我们必须下载该库并将其包含在我们的项目中。Webbrowser允许用户在表单中导航网页。 加载网页后，将执行webBrowser1_文档中的脚本Completed。 所以

有关下载和完整参考，请参阅以下链接

在html中定义：

<input type="hidden" name="image" id="image"/>

之后：

<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>

---

正如这里的其他人所说：你不能用JavaScript自动上传任何文件

然而！如果您可以访问要在代码中发送的信息，即不是C:\passwords.txt，则可以将其作为blob类型上载，然后将其作为文件处理

服务器最终将看到的内容与实际设置值的人员无法区分。最终，诀窍是从服务器开始一个新的

function uploadFile (data) {
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);
    
        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');
        
        // action after uploading happens
    xhr.onload = function(e) {
        console.log("File uploading completed!");
    };
    
        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);
}

    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});

---

那么，你能用这个做什么呢？我用它作为jpg的上传。这就省去了用户打开文件输入元素的麻烦，只需选择他们刚刚调整大小、修改过的本地缓存图像。。但它应该适用于任何文件类型。

我在这里给出了一个完整的参考和最新的2013年12月的答案：1文件输入中的默认值问题不是出于安全原因，而是浏览器未能实现它，没有什么好的原因：参见本文2一个简单的解决方案是在文件输入之上使用文本输入。当然，您需要一些代码来发送文件，现在使用文本输入中的值，而不是文件输入。在我的情况下，做HTA应用程序，这不是一个问题，我根本不使用表单。你能清除它吗？每次我再次访问时都会记住文件名，这让我很恼火。Pelase我明白安全问题，但是浏览器不应该能够区分危险的本地文件路径和更无害的东西，比如dataUrl吗？也许这是一个白日梦。拖放功能如何，无法将该文件设置为输入字段？@Vedmant是的，您可以通过其他元素上的拖放事件设置文件元素的值。看到了吗？如果我拍摄上传的图像，在浏览器中将其缩小，然后想将缩小的版本设置为上传文件？我需要对这些图像进行更多的裁剪，这样就可以通过编程设置文件，而不是从用户的pc上选择一个文件，而是一个已经在网站上的文件。这是什么语言？这不是javascript。我想这是我需要的。如果我想编辑产品信息但不想更改产品图像，我应该如何设置为现有产品图像？我可以在标记中显示现有图像，但当我提交时，文件未通过。@Partho63为什么要再次上载？如果这是因为表单强制字段验证，那么如果图像已经上载，您可以以某种方式将文件输入标记为非必需。如果我想将文件输入的值设置为非从磁盘生成的内容，该怎么办？@EugeneMala:文件输入的值是用户选择的文件。您不能将任何其他内容放入该值中。看起来您正在通过ajax调用上载HTML元素的值。这与设置input type=file元素的值非常不同。

<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>

function uploadFile (data) {
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);
    
        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');
        
        // action after uploading happens
    xhr.onload = function(e) {
        console.log("File uploading completed!");
    };
    
        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);
}

    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});