<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测测测</title>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!--实例一-->
<div style="width:200px; height:210px; border:1px solid red;" id="show">
<div class="mark"></div>
</div>
<br>
<input type="file" value="上传文件" onchange="getImgURL(this)">
<!--实例二-->
<input id="input-file" class="upload" type="file" value="">
<img src="" alt=""/>
<!--实例三-->
<style>
.img{opacity:0;}
.imgs{border:1px solid #78C3F3;background: #AADFFD;color: #1E88C7;border-radius: 4px;text-align:center;cursor: pointer;
padding:10px;}
</style>
<ul class="iconlist">
<li>
<div class="imgs" onclick="document.getElementById('img_1').click()">选择图片</div>
<input type="file" class="img" name="img[]" id="img_1" accept="image/*" onchange="l(this)"/>
</li>
</ul>
<ul class="iconlist">
<li><div width="225px"><img src="" width="225px" id="1"/></div></li>
</ul>
</body>
<script>
//实例一JS
var imgurl = "";
function getImgURL(node) {
var imgURL = "";
try{
var file = null;
if(node.files && node.files[0] ){
file = node.files[0];
}else if(node.files && node.files.item(0)) {
file = node.files.item(0);
}
//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
try{
//Firefox7.0
imgURL = file.getAsDataURL();
//alert("//Firefox7.0"+imgRUL);
}catch(e){
//Firefox8.0以上
imgRUL = window.URL.createObjectURL(file);
//alert("//Firefox8.0以上"+imgRUL);
}
}catch(e){ //这里不知道怎么处理了，如果是遨游的话会报这个异常
//支持html5的浏览器,比如高版本的firefox、chrome、ie10
if (node.files && node.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
imgURL = e.target.result;
};
reader.readAsDataURL(node.files[0]);
}
}
//imgurl = imgURL;
creatImg(imgRUL);
return imgURL;
}
function creatImg(imgRUL){ //根据指定URL创建一个Img对象
var textHtml = "<img src='"+imgRUL+"'/>";
$(".mark").html(textHtml);
}
//实例二JS
$(function(){
$('.upload').change(function(){
var oFReader = new FileReader();
var file = document.getElementById('input-file').files[0];
oFReader.readAsDataURL(file);
oFReader.onloadend = function(oFRevent){
var src = oFRevent.target.result;
$('img').attr('src',src);
}
})
})
//实例三JS
<script>
function l(evn){
var name = event.target.files[0].name;//获取上传的文件名
var divObj= $(evn).prev() //获取div的DOM对象
$(divObj).html(name) //插入文件名
var id = $(evn).attr('id');//获取id
var num = id.substr(4,1)
var file = event.target.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
console.log("路径地址:"+e.target.result)
$("#"+num).attr("src",e.target.result); //e.target.result就是最后的路径地址
};
}
}
</script>
</script>
</html>
