<form enctype="multipart/form-data" id="oForm">
 <input type="file" name="file" id="file" onchange="readAsDataURL()" />
 <input type="button" value="提交" onclick="doUpload()" />
 </form>
 <div>
 <img alt="" id="img"/>
 </div>

 function doUpload() { 
 var formData = new FormData($( "#oForm" )[0]); 
 console.log(formData); 
 $.ajax({ 
 url: 'pp', 
 type: 'POST', 
 data: formData, 
 async: false, 
 cache: false, 
 contentType: false, 
 processData: false, 
 success: function (returndata) { 
 console.log(returndata); 
 }, 
 error: function (returndata) { 
 console.log(returndata); 
 } 
 }); 
 } 

function readAsDataURL(){
 //檢驗(yàn)是否為圖像文件
 var file = document.getElementById("file").files[0];
 if(!/image\/\w+/.test(file.type)){
 alert("看清楚，這個(gè)需要圖片！");

 return false;
 }else{
 var reader = new FileReader();
 //將文件以Data URL形式讀入頁面
 reader.readAsDataURL(file);
 reader.onload=function(e){
 var result=document.getElementById("img");
 //顯示文件
 result.src= this.result ;
 }
 }
}