html5上傳圖片預覽
Ⅰ 怎麼實現圖片上傳前預覽功能呢
預覽圖片
預覽功能的基本設計思路：創建一個img元素，再把文件域的value值賦值給img元素的src屬性。
<form name="form4" id="form4" method="post" action="#">
<input type="file" name="file4" id="file4" ōnchange="preview4()" />
<img id="pic4" src="" alt="圖片在此顯示" width="120"/>
</form>
<scrīpt type="text/javascrīpt">
function preview4(){
var x = document.getElementById("file4");
var y = document.getElementById("pic4");
if(!x || !x.value || !y)
return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
y.src = "file://localhost/" + x.value;
}
else{ alert("您選擇的似乎不是圖像文件。"); }
}
</scrīpt>
試下效果：
如果你用的是Firefox（或Opera），可能會發現什麼也沒有發生。是的，很不幸Firefox的安全策略不允許我們顯示一個用戶的本地圖像文件。不知道他們為什麼要這么做，我個人覺得圖像文件並不會造成嚴重的安全性問題。即使是不久前比較熱門的那個會引起Windows崩潰的jpeg文件，要顯示它的前提條件是用戶自己選擇了這個文件或者你知道這個文件在用戶硬碟上的准確路徑。所以我想這種策略很可能來自於一個「懶惰」的開發人員，他並不想多寫一些程序來區分這個本地文件是一個圖像文件還是一個惡意文件，Firefox對安全性的要求讓他們有些過於敏感了。
讓Firefox顯示本地文件的唯一辦法就是修改它的默認安全策略：
在Firefox的地址欄中輸入「about:config」
繼續輸入「security.checkloari」
雙擊下面列出來的一行文字，把它的值由true改為false
然後你可以再試試上面預覽，everything works well！可惜的是我們並不能要求所有的用戶都去修改這個值（更不用說修改的過程還挺麻煩），所以這對我們來說毫無意義。我們能做的也許就是接受Firefox不能預覽本地圖片這種「可笑」的局面。
用DOM來創建對象
在上面的XHTML代碼中，我們為了預覽圖片，事先加入了一個沒有設置src的img對象。除去不美觀、代碼冗餘之外，如果用戶瀏覽器不支持Javascrīpt，他不僅無法使用這個功能，還要接受頁面上一個永遠不會顯示出來的破圖。要解決這個問題，我們就需要在「運行時」再生成這個img對象，途徑還是DOM。
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" ōnchange="preview5()"/>
</form>
<scrīpt type="text/javascrīpt">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value)
return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){ y.src = 'file://localhost/' + x.value; }
else{
var img=document.createElement('img');
img.setAttribute('src','file://localhost/'+x.value);
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
document.getElementById('form5').appendChild(img);
}
}
else{ alert("您選擇的似乎不是圖像文件。"); }
}
</scrīpt>
Ⅱ 3、javascript+CSS+Html5實現圖片預覽（本地和網路圖片）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transform</title>
<style type="text/css">
.test-box{
width:600px;
margin:50px auto;}
.pic{
-webkit-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;}
.top-pic{
position:absolute;
transform:scale(0,0)}
.test-box:hover .top-pic{
-webkit-transform-origin:top right;
-webkit-transform:scale(1,1);}
.test-box:hover .bot-pic{
-webkit-transform:scale(0,0);
-webkit-transform-origin:bottom left;
opacity: .5;
-webkit-transform:rotate(120deg);
-webkit-transform-origin:bottom left;
}
</style>
</head>
<body>
<div class="test-box">
<img class="pic top-pic" src="test-pic01.jpg" /慶尺>
<img class="pic bot-pic" src="test-pic02.jpg" />
</div>
</畝差敗body>
</html>
隨便寫了幾個效果，沒有用到JS，不過要用到JS只要把觸發事件替換掉上面的hover就行了，比如：
$(".button").click(function () {
。。。
});
這裡面用到CSS3，所以請不要用迅顫IE11以下的低版本瀏覽器，不然你啥都看不見
Ⅲ php怎樣上傳圖片以及預覽圖片
本地圖片，就搞個img，設置他的src就可以實現；
參考如下：
<div class="column " style="width: 400px; margin-left: 200px;" id="imageShow">
<div id="proctImageNew">@*用於圖片預覽*@
</div>
<div id="proctImage">
<div class="widget the-common-margin-top" style="height: 400px; border: 1px solid #eeeeee;
padding: 3px;">
<img id="imgHolder" style="max-height: 390px; max-width: 390px;" />
</div>
</div>
</div>
<form id="formImageUpload" name="formImageUpload" method="post" action="/DocTeam/ProctsImage/UploadImage"
enctype="multipart/form-data">
<div id="fileDiv">
<input type="file" id="theFile" name="theFile" size="20" style="cursor: pointer;
width: 65px; height: 60px; position: absolute; filter: alpha(opacity:1); -moz-opacity: 0;
opacity: 0; z-index: 102;" />
</div>
<input type="hidden" name="imageId_hide" id="imageId_hide" />
</form>
<div id="cover" style="position: absolute; background-color: White; z-index: 10;
filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; overflow: auto; width: 400px;">
<input id="selectImage" type="button" style="width: 65px; height: 60px;" value="Select" />
<br />
<br />
<input type="button" value="Upload" id="imageUpload" style="width: 65px; height: 60px;"
disabled="disabled" onclick="javascript:uploadImage();" />
</div>
//js本地圖片預覽，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png"; //允許上傳文件的後綴名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {//HTML5實現預覽，兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下瀏覽器的圖片預覽!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
} else {//ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1)
fileObj.blur(); //不加上document.selection.createRange().text在ie9會拒絕訪問
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
}
var a = document.selection.createRange().text;
// newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
// newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
//newPreview.style.width = 390 + "px";
newPreview.style.height = 390 + "px";
newPreview.style.border = "solid 1px #eeeeee";
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = document.getElementById(divPreviewId);
// tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
newPreview.style.display = "block";
tempDivPreview.style.display = "none";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
}
} else {
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
}
} else {
alert("僅支持" + allowExtention + "為後綴名的文件!");
fileObj.value = ""; //清空選中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
}
function setTheFileButton_Cover_SelectImageButton() {
// debugger;
// var position = $("#selectImage", "#cover").position();
// var css = { top: position.top, left: position.left };
// $("#theFile", "#fileDiv").css(css);
}
var $imgHolder = $('#imgHolder', "#proctImage");
var tempDiv = $("#temp_div");
$("#select", "#cover").click(function () {
$("#theFile", "#fileDiv").click().select();
});
$("#theFile", "#fileDiv").click(function () {
$(this).blur();
});
$("#theFile", "#fileDiv").change(function () {
PreviewImage(this, 'imgHolder', 'proctImage');
setTheFileButton_Cover_SelectImageButton();
// alert("預覽已生成!");
$("#imageUpload").prop("disabled", false);
});
Ⅳ html5拖拽圖片上傳，怎麼獲得圖片原始尺寸
用後台語言去獲取不就可以了。為什麼一定要在前端來獲取圖片原始大小呢？即使你要在前端實用，比如PHP獲取到了以後還是可以通過變數傳遞給前端的。至於PHP怎麼獲取圖片原始大小這個網上很容易找到資料！
Ⅳ 如何使用HTML5實現利用攝像頭拍照上傳功能
HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時，video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：
var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);
這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：
$.post(『upload.php』,{『data』:data});
在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}
以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。
相關規范：
（為便於閱讀，對原文進行了不失原意的適當修改，包括代碼中一些錯誤的重復，並作了注釋）
HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時，video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：
var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);
這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：
$.post(『upload.php』,{『data』:data});
在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}
以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。
Ⅵ 怎樣用html5實現拖拽上傳文件
，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然後獲取本地圖片信息，實現預覽，最後上傳。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽區域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對象
//檢測是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//檢測文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片！");
return false;
}
//拖拉圖片到瀏覽器，可以實現預覽功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上傳大小不能超過500K.");
return false;
}
var str = "<img src='"+img+"'><p>圖片名稱："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview").html(str);
//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
Ⅶ HTML5 做的移動 web app 怎樣實現從本地上傳圖片
當然可以，不過只能從相冊里傳
Ⅷ 想做一個PHP圖片上傳前預覽，麻煩幫忙看下為什麼預覽不能顯示
ie8以下的版本應該能預覽，ie9,火狐，谷歌等瀏覽器出於安全考慮，已經取消了顯示本地文件的許可權，只能讀取緩存里的文件。
1.你可以用flash上傳插件做預覽;
2.你可以先把文件傳到伺服器臨時文件里，如網路這是這樣子;確定保存後再從臨時文件里移動到上傳目錄;
3.你可以用兼容html5做預覽，不兼容html5的瀏覽器反而支持你上面的這種預覽方法，所以就可兼容目錄所有瀏覽器了。。
如果要做經常上傳圖片的可以用第3種，如果就是偶爾插圖上傳頭像的，就用第二種好了。。。
回答不專業。。愛看不看
Ⅸ 我在做一個網站，注冊後可以發布多張圖片。怎麼實現注冊人員可以發布多張圖片，並且可以修改預覽圖片效果
程序代碼中，圖片上傳到伺服器之前將圖片名稱自定義一下，改成上傳的當前時間，就不會被覆蓋了。
至於你後說的發布多張圖片也就是多文件上傳，這個用HTML5上傳控制項可以實現。
修改預覽圖片功喚凱能都得自己實現啊。這些都是根據你上傳圖片衫友後獲取相應的ID來預覽和塌喚或者修改的。