使用AJAX，把文件保存到臨時目錄，把返回的值（文件路徑），放到頁面上預(yù)先添加的IMG 標(biāo)簽中，就可顯示預(yù)覽圖片，再點(diǎn)上傳才把文件從臨時目錄（刪除臨時目錄文件）復(fù)制到你指定的目錄中
創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站營銷推廣，域名注冊，網(wǎng)絡(luò)空間，網(wǎng)站托管、服務(wù)器租用有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，請聯(lián)系創(chuàng)新互聯(lián)公司。
使用ajaxfileupload對文件進(jìn)行上傳，上傳完成后顯示在該頁上，即可以預(yù)覽，想要實(shí)現(xiàn)該效果，只需要在上傳成功之后服務(wù)端返回該圖片在服務(wù)端的路徑地址給前端，在ajax的success回調(diào)函數(shù)中，動態(tài)的設(shè)置頁面上img節(jié)點(diǎn)的src屬性為該地址路徑即可。具體示例代碼可以參考：
Html
div?class="uploadPicture"??
img?id="imgHead"?src=""?width="106"?height="122"?alt="頭像"???
input?type="file"?onchange="uploadHead();"?id="basicInfoHead"?style="display:none;"??
name="basicInfoHead"?/??
input?type="hidden"?id="basicHeadUrl"???
a?href="#basicInfo"?id="uploadBasicInfoHead"?上傳頭像/a??
/div
Javascript
//上傳頭像，觸發(fā)click方法??
$('#uploadBasicInfoHead').on('click',function(){??
$('#basicInfoHead').click();??
});??
function?uploadHead(){??
$.ajaxFileUpload({??
url:"${pageContext.request.contextPath}/profile/uploadBasicHead",//需要鏈接到服務(wù)器地址???
secureuri:false,??
fileElementId:"basicInfoHead",//文件選擇框的id屬性??
dataType:?'json',???//json??
success:?function?(data)?{??
$("#imgHead").attr("src","${pageContext.request.contextPath}/profile/readImage?imagePath="+data.imagePath);??
$('#basicHeadUrl').val(data.imagePath);??
},error:function(XMLHttpRequest,?textStatus,?errorThrown){??
alert('上傳失??！');??
}??
});??
};
備注：后端需要對應(yīng)的返回上傳成功的圖片的url路徑。
Web?Uploader?項(xiàng)目，符合你的要求。
1、引入資源
使用Web Uploader文件上傳需要引入三種資源：JS, CSS, SWF。
!--引入CSS--
link rel="stylesheet" type="text/css" href="webuploader文件夾/webuploader.css"
!--引入JS--
script type="text/javascript" src="webuploader文件夾/webuploader.js"/script
!--SWF在初始化的時候指定，在后面將展示--
2、Html
首先需要準(zhǔn)備一個按鈕，和一個用來存放添加的文件信息列表的容器。
!--dom結(jié)構(gòu)部分--
div?id="uploader-demo"
!--用來存放item--
div?id="fileList"?class="uploader-list"/div
div?id="filePicker"選擇圖片/div
/div
3、Javascript
創(chuàng)建Web?Uploader實(shí)例
//?初始化Web?Uploader
var?uploader?=?WebUploader.create({
//?選完文件后，是否自動上傳。
auto:?true,
//?swf文件路徑
swf:?BASE_URL?+?'/js/Uploader.swf',
//?文件接收服務(wù)端。
server:?'',
//?選擇文件的按鈕。可選。
//?內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.
pick:?'#filePicker',
//?只允許選擇圖片文件。
accept:?{
title:?'Images',
extensions:?'gif,jpg,jpeg,bmp,png',
mimeTypes:?'image/*'
}
});
監(jiān)聽fileQueued事件，通過uploader.makeThumb來創(chuàng)建圖片預(yù)覽圖。
PS: 這里得到的是Data URL數(shù)據(jù)，IE6、IE7不支持直接預(yù)覽?？梢越柚鶩LASH或者服務(wù)端來完成預(yù)覽。
//?當(dāng)有文件添加進(jìn)來的時候
uploader.on(?'fileQueued',?function(?file?)?{
var?$li?=?$(
'div?id="'?+?file.id?+?'"?class="file-item?thumbnail"'?+
'img'?+
'div?class="info"'?+?file.name?+?'/div'?+
'/div'
),
$img?=?$li.find('img');
//?$list為容器jQuery實(shí)例
$list.append(?$li?);
//?創(chuàng)建縮略圖
//?如果為非圖片文件，可以不用調(diào)用此方法。
//?thumbnailWidth?x?thumbnailHeight?為?100?x?100
uploader.makeThumb(?file,?function(?error,?src?)?{
if?(?error?)?{
$img.replaceWith('span不能預(yù)覽/span');
return;
}
$img.attr(?'src',?src?);
},?thumbnailWidth,?thumbnailHeight?);
});
然后剩下的就是上傳狀態(tài)提示了，當(dāng)文件上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應(yīng)uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
//?文件上傳過程中創(chuàng)建進(jìn)度條實(shí)時顯示。
uploader.on(?'uploadProgress',?function(?file,?percentage?)?{
var?$li?=?$(?'#'+file.id?),
$percent?=?$li.find('.progress?span');
//?避免重復(fù)創(chuàng)建
if?(?!$percent.length?)?{
$percent?=?$('p?class="progress"span/span/p')
.appendTo(?$li?)
.find('span');
}
$percent.css(?'width',?percentage?*?100?+?'%'?);
});
//?文件上傳成功，給item添加成功class,?用樣式標(biāo)記上傳成功。
uploader.on(?'uploadSuccess',?function(?file?)?{
$(?'#'+file.id?).addClass('upload-state-done');
});
//?文件上傳失敗，顯示上傳出錯。
uploader.on(?'uploadError',?function(?file?)?{
var?$li?=?$(?'#'+file.id?),
$error?=?$li.find('div.error');
//?避免重復(fù)創(chuàng)建
if?(?!$error.length?)?{
$error?=?$('div?class="error"/div').appendTo(?$li?);
}
$error.text('上傳失敗');
});
//?完成上傳完了，成功或者失敗，先刪除進(jìn)度條。
uploader.on(?'uploadComplete',?function(?file?)?{
$(?'#'+file.id?).find('.progress').remove();
});
更多細(xì)節(jié)，請查看js源碼。
jQuery File Upload是上傳文件的一個插件，不一定是圖片，所以里面沒做預(yù)覽的支持。但是可以直接用jquery簡單實(shí)現(xiàn)出來，代碼如下：
/*
先在js里擴(kuò)展一個uploadPreview方法
使用方法:?
div
img?id="ImgPr"?width="120"?height="120"?//div
input?type="file"?id="up"?/
把需要進(jìn)行預(yù)覽的IMG標(biāo)簽外?套一個DIV?然后給上傳控件ID給予uploadPreview事件
$("#up").uploadPreview({?Img:?"ImgPr",?Width:?120,?Height:?120,?ImgType:?["gif",?"jpeg",?"jpg",?"bmp",?"png"],?Callback:?function?()?{?}});
*/
jQuery.fn.extend({
uploadPreview:?function?(opts)?{
var?_self?=?this,
_this?=?$(this);
opts?=?jQuery.extend({
Img:?"ImgPr",
Width:?100,
Height:?100,
ImgType:?["gif",?"jpeg",?"jpg",?"bmp",?"png"],
Callback:?function?()?{}
},?opts?||?{});
_self.getObjectURL?=?function?(file)?{
var?url?=?null;
if?(window.createObjectURL?!=?undefined)?{
url?=?window.createObjectURL(file)
}?else?if?(window.URL?!=?undefined)?{
url?=?window.URL.createObjectURL(file)
}?else?if?(window.webkitURL?!=?undefined)?{
url?=?window.webkitURL.createObjectURL(file)
}
return?url
};
_this.change(function?()?{
if?(this.value)?{
if?(!RegExp("\.("?+?opts.ImgType.join("|")?+?")$",?"i").test(this.value.toLowerCase()))?{
alert("選擇文件錯誤,圖片類型必須是"?+?opts.ImgType.join("，")?+?"中的一種");
this.value?=?"";
return?false
}
if?($.browser.msie)?{
try?{
$("#"?+?opts.Img).attr('src',?_self.getObjectURL(this.files[0]))
}?catch?(e)?{
var?src?=?"";
var?obj?=?$("#"?+?opts.Img);
var?div?=?obj.parent("div")[0];
_self.select();
if?(top?!=?self)?{
window.parent.document.body.focus()
}?else?{
_self.blur()
}
src?=?document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter':?'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width':?opts.Width?+?'px',
'height':?opts.Height?+?'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src?=?src
}
}?else?{
$("#"?+?opts.Img).attr('src',?_self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
然后是HTML頁面進(jìn)行調(diào)用：
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"
html?xmlns="
head
title圖片上傳預(yù)覽演示/title
script?src="jquery.min.js"?type="text/javascript"/script
script?src="16/uploadPreview.js"?type="text/javascript"/script
script
$(function?()?{
$("#up").uploadPreview({?Img:?"ImgPr",?Width:?120,?Height:?120?});
});
/script
/head
body
div?style="width:500px;margin:0px?auto;"h2圖片上傳預(yù)覽演示/h2
divimg?id="ImgPr"?width="120"?height="120"?//div
input?type="file"?id="up"?/
/div
/body
/html
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//獲得表單元素
HttpPostedFile oFile = context.Request.Files[0];
//設(shè)置上傳路徑
string strUploadPath = "temp/";
//獲取文件名稱
string fileName = context.Request.Files[0].FileName;
補(bǔ)充：JQuery是繼prototype之后又一個優(yōu)秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）、events、實(shí)現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需要定義id即可。
可以上傳上去再把存儲路勁給img標(biāo)簽就實(shí)現(xiàn)了，但是涉及到存儲，需要用到后臺代碼，比如php這些，把圖片存入相應(yīng)的文件夾，再把路勁給標(biāo)簽，就實(shí)現(xiàn)了無刷新顯示了
重慶分公司
重慶分公司
