input file 选择图片并显示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择图片并显示</title>
</head>

<body>

function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
//var imgObjPreview=document.getElementById("preview");
var list = document.getElementById("pic_list");
var button = document.getElementById("file_a");
if(docObj.files) {
if(docObj.files.length==9){
alert("图片数量不能超过9张");
}
//火狐下，直接设img属性
for(var i=0;i<docObj.files.length;i++){
var imgObjPreview = document.createElement("img");
imgObjPreview.className = "dtbj_pic";
imgObjPreview.name="images";
imgObjPreview.style.width = '60px';
imgObjPreview.style.height = '60px';
imgObjPreview.style.margin = "10px";
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
list.insertBefore(imgObjPreview,button);
}
}
return true;
}

</script>

</body>
</html>

input file 选择图片并显示相关推荐

html5判断file选择状态,HTML input type=file选择图片立即显示
主要用来ul li来排列显示的图片. 引入jQuery CSS 代码: html,body{ margin:0px; padding:0px; } #tdAdd input{ height: 100% ...
input元素选择图片，并转换为base64格式在img标签显示
#input元素选择图片,并转换为base64格式在img标签显示 <body><input type="file"><img src="& ...
在html中的file怎么只能选择图片,input type=file 选择图片并且实现预览效果
通过标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上 ...
android调取手机相册或打开相机选择图片并显示
作为一个android小白,自己想尝试写一个小项目,因此写个小博客记录一下自己的开发历程.这一篇记录自己学习调取手机相册以及打开相机选择图片并显示示例是采用PopupWindow弹出底部菜单,选择相 ...
点击button按钮打开file选择图片并使用ajax图片上传并预览
最近有个需求让人很无奈,每条记录都需要让用户上传图片.由于使用插件无法准确的定位到那条记录,只好使用ajax上传图片准确获取id 先将file文件隐藏掉,通过点击button打开file选择图片,一些 ...
input file本地图片预览的方法（兼容IE、Chrome和Firefox）
JS兼容各个浏览器的本地图片上传即时预览效果 2014-02-26 我来说两句收藏我要投稿很早以前在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是go ...
html一键生成预览图,选择图片后显示缩略图（自动生成缩略图）
下面是完整代码,看注释: 显示选择图片的缩略图 #dropbox { width: 400px; height: 70px; line-height: 70px; text-align: center ...
AndroidStudio调用系统相册选择图片并显示、将图片保存到私有空间
有时候为了能让用户自定义软件的背景,我们需要实现从系统相册选择一张图片并将其进行保存,在后面打开的时候继续使用该图片充当背景.为什么要保存到私有空间呢?保存和到读取私有空间的内容是不需要权限的.由于实 ...
微信小程序实现点击按钮选择图片后显示图片并且可以预览该图片
wxml: js: data里要写图片这个变量. 点击选择图片预览图片给 image加事件,利用e.target.dataset.src 获取当前图片地址,赋值给wx.previewImage的 ...
input type=file选择图片按钮样式修改与图片预览
1 背景通过上图我们可以看到input type=file按钮的默认样式,非常不美观,如果要自定义该按钮的样式,要如何实现呢? 2 方式1样式 input覆盖整个按钮区域,并且设置完全透明 < ...

input file 选择图片并显示

input file 选择图片并显示相关推荐

最新文章

热门文章