【问题标题】:how to upload an image by its data uri to a file input via javascript?如何通过其数据 uri 将图像上传到通过 javascript 输入的文件?
【发布时间】:2018-11-23 20:35:50
【问题描述】:

我有这行代码

<div class="user-post-image"> </div>
<input type="file" name="upload-image" id="upload-image" required />

我有这张图片

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAS1BMVEUAAAACCBEBBQsDCxYBBAkZTZoCCBAAAQIBAwcAAgUYSJAOLFgCCBASNmwVPn0KHz8RM2YVQIEHFSoYSZISOHAXRosdV6wbUqMdVqpe5uSXAAAAFnRSTlMAIStBF/w2Aw8I7aBNwNqBY6ln3IXGCM4jMgAABJhJREFUeF7tmuly5CAMhMNpwPcleP8nXRkmoXZTGbMaJv7jfoGvJVrCZfvjzbp169atW7duWSMZ49xeRtfTvK9uZb/ObiQXyN7X1Snllf5ofpFt2LTNu/OogAIANTW/ZSD1XB3oLFCb+RUDWPnulEIiIDYL/Mzs2xvPpnk9mg6ZnrVy+9YWWKQ7H3Lp/8oJ27y1dqc8hCdy09tCYPWGmfux9JzC94TApNZDeC5Q7VsMsGnH4gsEvpf1Q8CO3kMoNVA7BHJbfYBQKBjQwGX4+gbMtMejv8qA3lWA6wzIzXmAcJUBO62x/KsMsDlO3mUGRCz/MgN2i/jLDGD7EXCdAb17IPPV66t4cgR+vbvAbo6Uvnwdv2bA5PgRDWwvGTA5fkS5RdrmQn5wHRq4kB9WQTdgN58B5CHQ0hL5zfZ6/aBabiwN/zGpUMHAyExD4wsXahhYqFPI4v59WSt1COwc+RUySDSAAaggCC2jDYFeA9Qw4EdSBBpT4wBQ4Do0QJrAKvwAAy0Ccg915FuOBggN8JUaoBZmLGUFBAhV5ARhDzZNtQT4mXQCcq92AiNDAxc0IO9hygnY2YdaJ6AlwYBeQ6h4Av8/g4uqxA9DR2mAnGtF0Lc8GyhvQLUTCG4hzkBBcUU96jUjnUDBECpXwFcjpzTg/EkM/DD2BQkYBOEeaOx5BHy/LK5kBjllBszZGgTVd11bMChDR3kYs3I7MaDaTpc0wI+ctIb57OGEL0Rf2gCCAfE8g6oVmm+qegOygWkNZ3xRsqkGwaWlGNjcs7IOPitY1aCoDbCtesbvNJdTyQH01AaY1j/NP5clVwW4JTaAYqCHn6pKfFlyAL7VTFqKAfOjAfD9wTdxTZyPYFyC1QxkvhWu6EFIM2NpBmQPz/jxpqInkG7ADwvyjdmQf6qcwDoGMj8+q5ATSDcAkY9F8TUUqBcxgWQD6hs/uMQ3cyiZgCUmkGzg2yYEcOPBt82myiYgJpBuwP3DjxcQ8j9EWQDSAdANjKv/G/DgHwEomcCOH2apaqycdg//lBRDbWZfUP/Q5QkgGhCzh79LSkNV8trauyUHgGqAtx6+LcDC17aY1hwAagjYpiDz0wKyZa9tVZqWl3/FcnkAPvmm7CEopfVFA1KsX/y0AIoCACHycwDoIcgfKbGkxJ/UOd/V4KOs4a2CvxbAB189EPjkM1iiAfAPfkEAwA91+MlA52JNjwXQ2E2d8vulAj+HoPdHTWkBnAUgXRZdLT7KStb6OICJz9ez8t3YpWGp9lPm4h47DfknL00BFLY/8+sY0EMawBSAk/KP9nOZ+VXOYGsT//mHIzjwi0CrFfkoa5jWif/kCoID34+f5Wd+lTlgLA7gz1cQQHjgc/k1W4BCfvPTl0Okq6FdOiE0S+XXFZIRj9oUICwLUIhHej8iXtcvP1tIH868Dx6+FLz3QblE/8JnfnUTemz7wakvIbpvEd4h/qAX4ulZNFJ3yzi2D43jclQuIv0ovhhPHwauEdclPdiaRzriy+n0DjDOdVZkH50nFE90YKSU7FMSZSKcQCcJQdZakxTRteG3bt26devWrT+iVfLjHE+E5QAAAABJRU5ErkJggg==

,我已将其保存到我的电脑中,但我不想这样做。当我实际上传这张图片时,网页会使用

更改 div 元素的 innerHTML
<img src='data:image/png;base64....'> 

我上传的图片。所以我试图通过javascript改变这个(div),但它不允许我继续前进。不幸的是,它需要在输入元素上获取某种值,这是必需的。如何通过“给”输入文件标记图像的数据uri“值”来上传我的图像?

【问题讨论】:

    标签: javascript file input data-uri


    【解决方案1】:

    通过阅读您模糊的答案,我认为您有一个自动将输入文件转换为 DIV 的功能。

    所以,这可能是Convert Data URI to File then append to FormData 的克隆。从那里您可以通过 AJAX 函数将文件发送到服务器或其他东西。

    var img = document.getElementsByClassName("user-post-image")[0]; //Get img data
    var blob = dataURItoBlob(img); //Converts to blob using link above
    var form = new FormData();
    form.append("image", blob);
    ajax.send(form); //The possible data sent.
    

    除此之外,您可能需要提供有关“继续前进”的更多信息。

    【讨论】:

    • 继续我的意思是点击提交。我拥有的是一个 python 脚本,它可以获取图像,将其转换为 URI,将其插入一段 HTML 代码,然后通过 javascript 将其注入div 元素。但这无关紧要。只有用户才能看到他上传的图像。如果表单没有必填字段,则无法提交表单。所以我想将图像 URI 注入到 document.forms[1] (这是我想要的形式)中。数据发送不是问题。您在哪里(我在哪里)找到了您放入 form.append() 的“图像”字符串?是名字,id attritube?
    • 如果你只想要 src 就不能这样做 .. document.getElementsByTagName("IMG")[0].src 吗?那会给数据uri?
    • 我想你误会了。我不想使用 javascript 来从服务器获取某些东西。我想在 odrer 中操作提交表单,通过在提交页面上单击或启动提交来将数据发送到服务器,该提交页面的输入文件具有我知道的“值”。我有图像 URI,我想以编程方式将其作为文件发送,就像我下载它并用鼠标选择它一样。
    猜你喜欢
    • 2017-02-03
    • 2013-05-26
    • 2020-04-16
    • 1970-01-01
    • 1970-01-01
    • 2013-08-25
    • 2019-12-22
    • 2021-12-24
    • 2020-12-04
    相关资源
    最近更新 更多