第JavaScript實現(xiàn)單圖片上傳并預(yù)覽功能本文實例為大家分享了JavaScript實現(xiàn)單圖片上傳并預(yù)覽功能的具體代碼，供大家參考，具體內(nèi)容如下

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title單圖片上傳并實現(xiàn)預(yù)覽/title

style

/*上傳圖片*/

.addPerson{

line-height:190px;

.addPhoto{

width:50px;

height:50px;

line-height:50px;

font-size:40px;

text-align:center;

vertical-align:middle;

border:1pxdashed#e7eaec;

cursor:pointer;

display:inline-block;

.addinput{

display:none;

.addShow{

width:200px;

height:170px;

display:inline-block;

vertical-align:middle;

background:#f3f3f48f;

margin-left:30px;

.addShowimg{

width:130px;

height:130px;

margin:20pxauto;

display:block;

/style

/head

body

div

label圖片上傳/label

div

div+/div

div

inputtype="file"onchange="previewFile()"name="sPicture"

/div

div

imgsrc=""alt=""

/div

/div

/div

/body

scriptsrc="/jquery/1.10.2/jquery.min.js"/script

script

$(".addPhoto").click(function(){

$('[type=file]').click();

functionpreviewFile(){

varpreview=document.getElementsByClassName("addImg")[0];

varfile=document.getElementsByClassName('addFile')[0].files[0];

varreader=newFileReader();

reader.addEventListener("load",function(){

preview.src=reader.result;

},false);

if(file){

reader.readAsDataURL(file);

//ajax請求如下

//使用FormData將圖片以文件的形式傳到后臺

//pictureFile后臺接收的參數(shù)

//varformdata=newFormData();

//formdata.append("pictureFile",addFile);

//$.ajax({

//url:"",

//type:"post",

//dataType:"json",

//data:formdata,

//async:false,//四個false屬性不能少

//cache:false,

//contentType:false,

//processData:false,

//success:function(data){

//if(data.success){

//myAlert(data.msg);

//}

//},

//error:function(){

//if(data.success){

//myAl