ajaxFileUpload结合图片预览（可控制上传的张数）
发布时间：2020-12-16 00:30:56 所属栏目：百科 来源：网络整理
导读：下面是上传主页面 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"html head titleajax_upload.html/title !-- 注：jquery 必须放到ajaxfileupload.js前面来，否则使用不了 -- script src="jQuery.v1.4.2.js"/scriptscript src="ajaxfileupl
|
下面是上传主页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax_upload.html</title>
<!-- 注：jquery 必须放到ajaxfileupload.js前面来，否则使用不了 -->
<script src="jQuery.v1.4.2.js"></script>
<script src="ajaxfileupload.js"></script>
<!-- 注：js数组的扩展函数 -->
<script src="array_extend.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var addfileIds = [];//存储附件的ID
var pre_view_count = 1;//预览元素索引初始值
var max_view_count = 4;//定义图片上传最大值（即：上传最多张数）
//index 只是区分一下，比如页面有很多个上传控件时 就需要用到
function ajaxFileUpload(index){
if(addfileIds.length > max_view_count -1 ){
alert("图片最多只能上传"+max_view_count+"张!");
return false;
}
$("#pre_tr").append("<td id='preview_td_"+pre_view_count+"'><div id='preview"+pre_view_count+"'></div></td>");
//等待图片
$(".wait"+index).show();
$.ajaxFileUpload({
url:'upload.jsp',//上传到哪里 这边只是测试，返回一个数字，具体业务逻辑需要去开发
secureuri:false,fileElementId:'picFile'+index,//文件选择框的id
dataType:'text',//服务器返回的格式，可以是json
success:function(data,status){ //相当于java中try语句块的用法
$(".wait"+index).hide();
// alert(data)
var evda = eval('('+ data +')');
var jsonda = evda.msg;
// alert(jsonda.id);
if(jsonda.id=="out"){//如果超出附件大小，这边会填上标志和附件大小
alert("附件超过"+jsonda.path+"M,不能上传!");
return;
}
if(jsonda.id=="format"){
alert("您上传的格式有误!");
return;
}
var str = "del('"+jsonda.id+"',"+pre_view_count+")";
var imgeStr = '<img style="cursor: pointer;" onclick='+str+' src="hnbc2013_delete.png">';
$("#preview_td_"+pre_view_count).append('<span id="'+jsonda.id+'">'+jsonda.fileName+""+imgeStr+"</span><br/>");
addfileIds.push(jsonda.id);
pre_view_count ++;//数组索引增加
},error:function(data,status,e){ //相当于java中catch语句块的用法
alert(data.msg);
$('#attach'+index).html('添加失败');
}
});
}
//图片上传预览 IE是用了滤镜。
function previewImage(file)
{
if(addfileIds.length > max_view_count -1 ){
return false;
}
var MAXWIDTH = 160;
var MAXHEIGHT = 100;
var div1 = document.getElementById('preview'+pre_view_count);
if (file.files && file.files[0])
{
div1.innerHTML ='<img id=imghead'+pre_view_count+'>';
var img = document.getElementById('imghead'+pre_view_count);
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
img.style.marginTop = rect.top+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div1.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH,img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div1.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+""'></div>";
}
}
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 del(id,img_view_index){
//需要自己 去java后台删除对应的附件数据 和 文件
//var url = "${basepath}/uploadAction!deleteFile.html?fjId="+id;
//$.get(url,{},function(data){
// $("#"+id).remove();
//
//});
addfileIds.removeObj(id);
alert(addfileIds.join())
$("#preview_td_"+img_view_index).remove();
}
</script>
</head>
<!-- 预览图片样式 -->
<style type="text/css">
#preview{width:160px;height:110px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<body>
<input name="picFile" onchange="ajaxFileUpload(1,'申请报告');previewImage(this);" id="picFile1" style="height: 30px;width: 350px" type="file" />
<img src="hnbc2013wait.gif" class="wait1" style="display: none">
<br/>
<table width="1000px">
<tr id="pre_tr">
</tr>
</table>
</body>
</html>
相关js文件在附件，附件直接下载放在Web项目下 可直接运行 这边是上传的处理地址JSP,模拟生成ID <%@ page language="java" pageEncoding="utf-8"%>
<%
//模拟附件生成的ID 我这边是把所有附件弄得一张表 然后和主表进行关联
int uInt = (int)(Math.random()*1000+1);
out.print("{'success':'"+true+"','msg':{'id':'"+uInt+"','fileName':'上传文件名'}}");
%>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |