上传单张图片并预览(来自本菜鸡的记录。。。)
如图:点击图片按钮,选择图片后,图片按钮变成自己选择的那张
js:
<script type="text/javascript">
$(function(){
$("#image").click(function(){
$("#file").click();
});
$("#file").on("change",function(){
function getObjectURL(file) {
var url = null;
if (window.createObjectURL!=undefined) {
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url;
}
var file =document.getElementById("file");
var src= getObjectURL(file.files[0]) ;//获取文件信息
//获取到input的value,里面是文件的路径
var filePath =file.value;
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
// 检查是否是图片
if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
alert("上传错误,文件格式必须为:png/jpg/jpeg!");
}else{
$("#image").attr('src',src);
}
});
});
html:
<tr>
<td><label>会场图片:</label></td>
<td colspan="3">
<img src="images/addimage.jpg" id="image" width="30px" height="30px" >
<input type="file" id="file" multiple="multiple" name="activityImage" style="display: none;">
</td>
</tr>
效果: