瀏覽器圖片上傳預覽

文件選擇框：<input type="file" id="uploadFile" name="uploadFile" οnchange="javascript:selectImage(this);">

<script>
		
		function selectImage(file) {
			
			if (!file.files || !file.files[0]) {
				return;
			}
			
			var fileLength = file.files.length;
			//限制數量爲8
			if(fileLength > 8){
				clearImage();
				alert("請重新選擇，最多添加8個文件！")
				return
			}
			// 驗證格式
			for(var i = 0 ; i < fileLength ; i++){
				if(!checkPicture(file.files[i])){
					clearImage();
					alert("請上傳  .jpg .png .gif .bmp類型的圖片文件")
					return
				}
			}
			// 圖片預覽（解決js閉包問題）
			for(var i = 0 ; i < fileLength ; i++){
				(function(i){
					var reader = new FileReader();
					reader.onload = function(evt) {
						/* document.getElementById('image').src = evt.target.result; */
						var imag = $("<img>").attr("id","image"+i).attr("src",evt.target.result).attr("style","width:44%;margin:2%");
						$("#imageArea").append(imag)
						image = evt.target.result;
					}
					reader.readAsDataURL(file.files[i]);
				})(i)
			}
		}
		// 文件上傳
		function uploadImage() {
			$.ajaxFileUpload({
		        //處理文件上傳操作的服務器端地址(可以傳參數,已親測可用)
		        url:"../repair_apply/uploadfile",
		        secureuri:false,                           //是否啓用安全提交,默認爲false 
		        fileElementId:'uploadFile',               //文件選擇框的id屬性
		        dataType:'JSON',                           //服務器返回的格式,可以是json或xml(需要大寫)等     text
		        success:function(data, status){            //服務器響應成功時的處理函數
		            data = data.replace(/<pre.*?>/g, ''); // ajaxFileUpload會對服務器響應回來的text內容加上
		            data = data.replace("</pre>", ''); // 本例中設定上傳文件完畢後,服務端會返回給前臺[0`filepath]
		            data = eval("("+data+")");
		        	if (data.success) {
		        		clearImage();
		        		alert("上傳成功")
		        			
		            } else  {
		            	alert("文件爲空，請重新上傳！")
		            }
		        },
		        error:function(data, status, e){ //服務器響應失敗時的處理函數
		           alert("上傳失敗");
		        }
		    }); 
		}
		
		function clearImage(){
			$("#uploadFile").val("");
			$("#imageArea").html('');
			//  上傳按鈕不可用
			$("#uploadImageBtn").attr("disabled",true);
 
		}
		//文件類型限制
		function checkPicture(file){
			return /.(jpg|png|gif|bmp|JPG|PNG|GIF|BMP)$/.test(file.name)?true:false;
		}
		
	</script>

 

我自己的案列：<input type="file" id="uploadFile" name="uploadFile" οnchange="javascript:selectImage(this);">

 

<script>
function selectImage(file) {
	if (!file.files || !file.files[0]) {
		return;
	}
	
	var fileLength = file.files.length;
	console.log(fileLength);
	//限制數量爲8
	if(fileLength > 1){
		alert("請重新選擇，最多添加1個文件！")
		return
	}
	// 驗證格式
	for(var i = 0 ; i < fileLength ; i++){
		if(!checkPicture(file.files[i])){
			alert("請上傳  .jpg .png .gif .bmp類型的圖片文件")
			return
		}
	}
	// 圖片預覽（解決js閉包問題）
	var reader = new FileReader();
	reader.onload = function(evt) {
		$('#imgsrc').attr('src',evt.target.result); 
	}
	reader.readAsDataURL(file.files[0]);
	
}
//文件類型限制
function checkPicture(file){
	return /.(jpg|png|gif|bmp|JPG|PNG|GIF|BMP)$/.test(file.name)?true:false;
}

</script>