![javascript预览图片——IT*系列(九) javascript预览图片——IT*系列(九)](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
再使用htm控件
<input type="file" name="file" />
上传图片的时候,往往需要先预览图片,然后点击保存按钮,把图片上传到服务器。今天正好解决了这样一个问题,记录博文,以备后用。
html 代码
<div>
<input type="file" id="filePreview" /><br />
<img id="imgPhoto" style="width:50px;height:50px;" />
</div>
js 代码
$("#filePreview").on("change", function () {
var url = $(this).val();
if (url.length == ) {
alert("请选择文件");
return;
}
//判断文件扩展名(待todo)
var file = document.getElementById("filePreview");
var windowURL = window.URL || window.webkitURL;
var src = windowURL.createObjectURL(file.files[]);//第一个文件,若是多文件上传,需循环
$("#imgPhoto").attr("src", src);//修改图片控件的src属性
});