選擇圖片並顯示 (單檔案):

<p>
<label>請選擇圖片:</label>
<input type="file" id="file_input" accept="image/jpeg, image/png"/>
</p>
<div id="result"></div>

 

<script language="javascript">

var result = document.getElementById("result");
var input = document.getElementById("file_input");

if(typeof FileReader==='undefined'){
result.innerHTML = "Sorry, 瀏覽器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}

function readFile(){
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt="" height="100" />'
}
}

</script>

選擇圖片並顯示 (多檔案) 1 :

<input type="file" id="collection" multiple="multiple" /><br/>

<output id="image_output"></output>

AAA

<script language="javascript">

if ( window.FileReader ) {

document.getElementById("collection").onchange = function(){

for (var i=0, file; file=this.files[i]; i++) {
var reader = new FileReader();
reader.onloadend = (function(file){
return function(){

var image = new Image();
image.height = 100;
image.title = file.name;
image.src = /^image/.test(file.type)
? this.result
: "http://i.stack.imgur.com/t9QlH.png";

document.getElementById('image_output').appendChild( image );
}
})(file);
reader.readAsDataURL( file );
}
}
}

</script>


選擇圖片並顯示 (多檔案) 2 :

<input type="file" id="collection" multiple="multiple" /><br/>

<output id="image_output"></output>


<script language="javascript">

if ( window.FileReader ) {
document.getElementById("collection").onchange = function(){

for (var i=0, file; file=this.files[i]; i++) {
var reader = new FileReader();
reader.onloadend = (function(file){
return function(){
document.getElementById('image_output').innerHTML
+= '<img src="'+this.result +'" height="100"/> <br/>';
}
})(file);
reader.readAsDataURL( file );
}
}
}else{
alert("瀏覽器不支援 HTML 5");
}

</script>

 

選擇圖片並顯示 (多檔案、多選擇、刪除):

可以參考:http://www.raymondcamden.com/2014/04/14/MultiFile-Uploads-and-Multiple-Selects-Part-2

本程式碼是以參考加以改良:


<!doctype html>
<html>
<head>
<title>Proper Title</title>
<style>
#selectedFiles img {
max-width: 200px;
max-height: 200px;
float: left;
margin-bottom:10px;
}
</style>
</head>

<body>
<form id="myForm" method="post">
Files: <input type="file" id="files" name="files" multiple><br/>
<div id="selectedFiles"></div>
<input type="submit">
</form>
</body>
</html>

 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script>
var selDiv = "";
var storedFiles = [];

$(document).ready(function() {
$("#files").on("change", handleFileSelect);

selDiv = $("#selectedFiles");
$("#myForm").on("submit", handleForm);

$("body").on("click", ".selFile", removeFile);
});

function handleFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {

if(!f.type.match("image.*")) {
return;
}
storedFiles.push(f);

var reader = new FileReader();
reader.onload = function (e) {
var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
selDiv.append(html);

}
reader.readAsDataURL(f);
});

}

function handleForm(e) {
e.preventDefault();
var data = new FormData();

for(var i=0, len=storedFiles.length; i<len; i++) {
data.append('files', storedFiles[i]);
}

var xhr = new XMLHttpRequest();
xhr.open('POST', 'handler.cfm', true);

xhr.onload = function(e) {
if(this.status == 200) {
console.log(e.currentTarget.responseText);
alert(e.currentTarget.responseText + ' items uploaded.');
}
}

xhr.send(data);
}

function removeFile(e) {
var file = $(this).data("file");
for(var i=0;i<storedFiles.length;i++) {
if(storedFiles[i].name === file) {
storedFiles.splice(i,1);
break;
}
}
$(this).parent().remove();
}
</script>











創作者介紹
創作者 黃彥霖 的頭像
黃彥霖

彥霖 實驗筆記

黃彥霖 發表在 痞客邦 留言(0) 人氣()