如何将图片添加到窗体中作为预览

how do i go about adding a picture to a form as a preview?

本文关键字：窗体 添加      更新时间：2023-09-26

我现在正在做一个头版广告广告页将显示图片和一些标题等

在后台的

中，我为用户创建了一个表单来更改该图像然后将图像保存在db中作为blob(我不确定)

我希望能够预览用户上传后的图片

我在谷歌上搜索过，但还没有找到任何答案等等

任何提示和帮助将不胜感激!!

<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
Picture: <input type="img" />
</fieldset>
</form>
</body>
</html>

我将需要生成这个使用JAVASCRIPT，所以我如何去把那张图片的形式?并预览它

你需要什么浏览器支持?如果这个功能(预览图片上传)只适用于现代浏览器(例如最新的Firefox, Chrome)，你可以尝试使用HTML5中的File API。

FileReader例子

这很有趣，因为您甚至可以在将文件上传到服务器之前在客户端读取或显示有关文件的信息。

如果您必须在此特性中支持功能较差的浏览器，那么您可能会遇到这样的解决方案:使用XHR Post上传文件，然后让服务器返回图像的URL。上传完成后，您可以动态更新页面上的图像源，同时保持在同一页面上。

<input type="file" name="img" />

http://www.cs.tut.fi/jkorpela/形式/file.html

相关文章：