ajax异步上传文件/图片

JS前端

注意：ajaxFileUpload需要有jQuery的支持，所以这段JS代码需要放在引入的jQuery代码后面，或者放在$.ready(function(){})的方法里面，不然会报错

//JS图片异步上传
function ajaxIconUpload() {
$.ajaxFileUpload
(
{
url: "${ctx}/service/iconUpload.do", //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'iconFile', //文件上传空间的id属性  <input type="file" id="file" name="file" />
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status)  //服务器成功响应处理函数
{
alert(data);
$("#iconFile-queue").attr("src", data);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;

}

HTML前端

<div class="field-box">
<label>
<span class="required_star">*</span>
<YESsafe:localMessage key="service_management_icon"/>
</label>
<div id="div_iconFile" style="float:left;background-color:#00A232;height: 30px; line-height: 30px; width: 80px;"
class="uploadify-button iconDiv" onclick="javascript:clickIconFile()" id="iconFile-button">
<span class="uploadify-button-text">选择文件</span>
<input name="iconFile" style="display:none;height: 30px; width: 80px;" class="uploadify"
id="iconFile" type="file" onchange="ajaxIconUpload();previewImage(this);" />
</div>
<div class="uploadify-queue" id="iconFile-queue"></div>
<div id="preview"></div>
<!-- <div id="iconFile" ></div> -->
</div>
<div id="showIconDiv" class="field-box" style="display:none"></div>

WEB服务器端

@RequestMapping(value= "/service/iconUpload",method=RequestMethod.POST)

@ResponseBody

public String iconUpload(HttpServletRequestrequest,

@RequestParam(value ="iconFile") MultipartFile iconFile,

@RequestParam(value ="sessionId", required = false) String sessionId){

AjaxResult ajaxResult = newAjaxResult();

ByteArrayOutputStream bos = newByteArrayOutputStream();

InputStream stream = null;

try{

if(iconFile != null){

stream =iconFile.getInputStream();

byte[] buffer =newbyte[1024*1024];

int byteread = 0;

while((byteread=stream.read(buffer))!=-1)

{

bos.write(buffer,0,byteread);

bos.flush();

}

if(StringUtils.isNotBlank(sessionId)){

HttpSession session =MySessionContext.getInstance().getSessionById(sessionId);

if(session!=null){

session.setAttribute("serviceIconByteArray",bos.toByteArray());

session.setAttribute("serviceIconName",iconFile.getOriginalFilename());

}

}else{

request.getSession().setAttribute("serviceIconByteArray",bos.toByteArray());

request.getSession().setAttribute("serviceIconName",iconFile.getOriginalFilename());

}

ajaxResult.setSuccess(true);

}

}catch(Exception e){

logger.error("icon uploaderror-->", e);

}finally{

try{

bos.close();

if(stream!=null){

stream.close();

}

}catch(Exception e){

logger.error("iconupload:stream close error-->", e);

}

}

returnJSONObject.fromObject(ajaxResult).toString();

}

另外我们经常需要用到在前端预览上传的图片

//预览图片
function previewImage(file)
{
var MAXWIDTH  = 260;
var MAXHEIGHT = 180;
var div = document.getElementById('preview');
var fileSize = 0;
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
if (isIE && !file.files) {
var filePath = file.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = file.files[0].size;
}
var size = fileSize / 1024;
if(size>100){
alert("<YESsafe:localMessage key="service_management_icon_limit"/>100KB");
} else
if (file.files && file.files[0])
{
div.innerHTML ='<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function(){//1
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width  =  rect.width;
img.height =  rect.height;
//	         img.style.marginLeft = rect.left+'px';
img.style.marginTop = rect.top+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
iconSelectFlag= true;
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
iconSelectFlag= true;
}
if(iconSelctFlag){
$("#div_iconFile").parent().children("#icon-error").remove();
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;

if( rateWidth > rateHeight )
{
param.width =  maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}

param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}

function clickIconFile(){
var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
if(ie){
document.getElementById("iconFile").click();
}else if (navigator.userAgent.indexOf('Firefox') >= 0){
var a=document.createEvent("MouseEvents");//FF的处理
a.initEvent("click", true, true);
document.getElementById("iconFile").dispatchEvent(a);
} else{
document.getElementById("iconFile").click();
}
}

另外，我们有时候需要用到清空Input标签下的File类型的参数，有以下三种方法

清空input file

代码如下:

<inputtype="file" id="fileupload" name="file" />

第一种:

复制代码 代码如下:

var obj =document.getElementById('fileupload') ;

obj.select();

document.selection.clear();

第二种：

复制代码 代码如下:

var obj =document.getElementById('fileupload') ;

obj.outerHTML=obj.outerHTML;

来自 </article/1251406.html>

第三种

var file =document.getElementById("iconFile");

if(file.outerHTML) {

file.outerHTML = file.outerHTML;

} else { // FF(包括3.5)

file.value = "";

}