<!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>
