JS前端
注意:ajaxFileUpload需要有jQuery的支持,所以这段JS代码需要放在引入的jQuery代码后面,或者放在$.ready(function(){})的方法里面,不然会报错
//JS图片异步上传
function ajaxIconUpload() {
$.ajaxFileUpload
(
{
url: "${ctx}/service/iconUpload.do", //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'iconFile', //文件上传空间的id属性
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;
}
@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(" 100KB");
} else
if (file.files && file.files[0])
{
div.innerHTML ='';
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 = '';
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 = "";
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
代码如下:
第一种:
复制代码 代码如下:
var obj =document.getElementById('fileupload') ;
obj.select();
document.selection.clear();
第二种:
复制代码 代码如下:
var obj =document.getElementById('fileupload') ;
obj.outerHTML=obj.outerHTML;
来自
第三种
var file =document.getElementById("iconFile");
if(file.outerHTML) {
file.outerHTML = file.outerHTML;
} else { // FF(包括3.5)
file.value = "";
}