当前位置: 代码迷 >> Ajax >> ajax 多图上传有关问题 预览有关问题
  详细解决方案

ajax 多图上传有关问题 预览有关问题

热度:434   发布时间:2012-03-18 13:55:39.0
ajax 多图上传问题 预览问题 - Web 开发 / Ajax
如下代码,ie7中无法打开,ie8中没有预览按钮。ff添加按钮无效。新手求高手帮忙解决


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 <script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">  
//全局变量
var FileCount=8;//上传文件总数
 //添加上传文件按钮
 function addFile(obj)
 {
  var filePath=$(obj).prev().val();
  var FireFoxFileName="";
  //FireFox文件的路径需要特殊处理 
  if($.browser.mozilla) 
  {
  FireFoxFileName=filePath;
  filePath=$(obj).prev()[0].files.item(0).getAsDataURL();
  }
  if(!checkFile(filePath,FireFoxFileName))
  {
  $(obj).prev().val("");
  return;
  }
  if(filePath.length==0)
  {
  alert("请选择上传文件");
  return false;
  }
  FileCount++;
  //添加上传按钮
  var html='<span>';
  html+='<input id="f'+FileCount+'" name="'+FileCount+'" type="file"/> ';
  html+='<input type="button" value="添加" onclick="addFile(this)"/>';
  html+='</span>';
  $("#fil>span").hide();//隐藏之前的上传按钮
  $("#fil").append(html);
  //添加图片预览
  html='<li>';
  html+='<img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" alt="暂无预览" />';
  html+='<br/>';
  html+='<a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)">删除</a>';
  html+='</li>';
  $("#ImgList").append(html);
 }
 //删除上传文件(file以及img)
 function DelImg(obj)
 {
  var ID=$(obj).attr("name");
  ID=ID.substr(3,ID.length-3);
  $("#f"+ID).parent().remove();
  $(obj).parent().remove();
  return false;
 }
  //检查上传文件是否重复,以及扩展名是否符合要求
function checkFile(fileName,FireFoxFileName)
{
  var flag=true;
  //文件重复判断
  $("#ImgList>li>img").each(function(){
  if($.browser.msie && ($.browser.version=="6.0"||$.browser.version=="7.0"))//IE6和7特殊处理
  { 
  var tempFileName="file:///"+fileName.replace(/\\/g,"/");
  tempFileName=tempFileName.replace(/\s+/g, "%20");
  if(tempFileName==$(this).attr("src"))
  {
  alert('上传文件中已经存在\''+fileName+'\'!');
  flag=false;
  return;
  }
  } 
  if(fileName==$(this).attr("src"))
  {
  flag=false;
  if(FireFoxFileName!='')
  {
  alert('上传文件中已经存在\''+FireFoxFileName+'\'!');
  }
  else
  {
  alert('上传文件中已经存在\''+fileName+'\'!');
  }
  return;
  }
  });
  //文件类型判断
  var str="jpg|jpeg|bmp|gif";
  var fileExtName=fileName.substring(fileName.indexOf(".")+1);//获取上传文件扩展名
  if(FireFoxFileName!='')//fireFox单独处理
  {
  fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1);
  }
  //alert(fileExtName);
  if(str.indexOf(fileExtName.toLowerCase())==-1)
  {
  相关解决方案