再使用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 == 0) { alert("请选择文件"); return; } //判断文件扩展名(待todo) var file = document.getElementById("filePreview"); var windowURL = window.URL || window.webkitURL; var src = windowURL.createObjectURL(file.files[0]);//第一个文件,若是多文件上传,需循环 $("#imgPhoto").attr("src", src);//修改图片控件的src属性 });
效果
时间: 2024-10-04 22:12:37