13518219792
使用AJAX，把文件保存到临时目录，把返回的值（文件路径），放到页面上预先添加的IMG 标签中，就可显示预览图片，再点上传才把文件从临时目录（删除临时目录文件）复制到你指定的目录中
创新互联公司-成都网站建设公司，专注成都网站建设、网站设计、网站营销推广，域名注册，网络空间，网站托管、服务器租用有关企业网站制作方案、改版、费用等问题，请联系创新互联公司。
使用ajaxfileupload对文件进行上传，上传完成后显示在该页上，即可以预览，想要实现该效果，只需要在上传成功之后服务端返回该图片在服务端的路径地址给前端，在ajax的success回调函数中，动态的设置页面上img节点的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
//上传头像，触发click方法
$('#uploadBasicInfoHead').on('click',function(){
$('#basicInfoHead').click();
});
function uploadHead(){
$.ajaxFileUpload({
url:"${pageContext.request.contextPath}/profile/uploadBasicHead",//需要链接到服务器地址
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('上传失败！');
}
});
};
备注：后端需要对应的返回上传成功的图片的url路径。
Web Uploader 项目，符合你的要求。
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
首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。
!--dom结构部分--
div id="uploader-demo"
!--用来存放item--
div id="fileList" class="uploader-list"/div
div id="filePicker"选择图片/div
/div
3、Javascript
创建Web Uploader实例
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: BASE_URL + '/js/Uploader.swf',
// 文件接收服务端。
server: '',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。
PS: 这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。
// 当有文件添加进来的时候
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实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('span不能预览/span');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
然后剩下的就是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('p class="progress"span/span/p')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
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');
// 避免重复创建
if ( !$error.length ) {
$error = $('div class="error"/div').appendTo( $li );
}
$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
更多细节，请查看js源码。
jQuery File Upload是上传文件的一个插件，不一定是图片，所以里面没做预览的支持。但是可以直接用jquery简单实现出来，代码如下：
/*
先在js里扩展一个uploadPreview方法
使用方法:
div
img id="ImgPr" width="120" height="120" //div
input type="file" id="up" /
把需要进行预览的IMG标签外 套一个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页面进行调用：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
html xmlns="
head
title图片上传预览演示/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图片上传预览演示/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];
//设置上传路径
string strUploadPath = "temp/";
//获取文件名称
string fileName = context.Request.Files[0].FileName;
补充：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
可以上传上去再把存储路劲给img标签就实现了，但是涉及到存储，需要用到后台代码，比如php这些，把图片存入相应的文件夹，再把路劲给标签，就实现了无刷新显示了
