`
jackroomage
  • 浏览: 1217452 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

多个图片上传 js 预览功能

 
阅读更多

一  、方法1

来源:http://zhidao.baidu.com/question/281192956.html

 

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  
<script type="text/javascript"> 
//全局变量
var FileCount=0;//上传文件总数
 //添加上传文件按钮
 function addFile(obj)
 {
  var filePath=$(obj).prev().val();
  var FireFoxFileName="";
  //FireFox文件的路径需要特殊处理
  if(window.navigator.userAgent.indexOf("Firefox")!=-1)
  {
     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").append(html);
   //添加图片预览
   html='<li>';
   html+='<img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer;" 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").find(":img").each(function(){
     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)
 {
   alert("只允许上传格式为jpg,jpeg,bmp,gif的文件。");
    flag=false;
 }
 return flag;
}
</script>  
<style type="text/css">  
  .fil
  {  
    width:300px;
  }
  .fieldset_img
  {
     border:1px solid blue;
     width:550px;
     height:180px;
     text-align:left;

  }
  .fieldset_img img
  {
     border:1px solid #ccc;
     padding:2px;
     margin-left:5px;
  }
  #ImgList li
  {
     text-align:center;
     list-style:none;
     display:block;
     float:left;
     margin-left:5px;
  }
</style>  
</head>  
<body>  
<p>上传预览图片:<br>
<div id="fil" class="fil">
  <span>
   <input id="f0" name="f0" type="file"/>
   <input type="button" value="添加" onclick="addFile(this)"/>
  </span>
</div>
</p>
<div id="ok">
<fieldset class="fieldset_img">
<legend>图片展示</legend>
<ul id="ImgList">
<!--li>
<img id="img1" width="100" height="100" style="cursor:pointer;">
<br/>
<a href="#" name="img1" onclick="DelImg(this)">删除</a>
</li-->
</ul>
</fieldset>
</div>
  
 </body>
</html>

 

二、方法2、

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script language="javascript">

function addComponent()
{
        var hiddenval = document.getElementById("hiddeninput").value;
        var afterval = hiddenval+1;
        document.getElementById("hiddeninput").value = afterval;
        var imgoo = afterval;
        var uploadHTML = document.createElement( "<input type='file' id='"+imgoo+"' name='upload' onchange='getimgsrcid(this);'/>");
        document.getElementById("files").appendChild(uploadHTML);
        var img = new Image(); 
        img.id = "img"+imgoo;
        img.width = "230";
        img.height = "210";
        document.getElementById("files").appendChild(img);
        uploadHTML = document.createElement( "<p/>");
        document.getElementById("files").appendChild(uploadHTML);
}

function  getimgsrcid(obj)
{
    document.getElementById("img"+obj.id).src = getFullPath(obj);
}

function getFullPath(obj)
{
    if(obj)
    {
        //ie
        if (window.navigator.userAgent.indexOf("MSIE")>=1)
        {
            obj.select();
            return document.selection.createRange().text;
        }
        //firefox
        else if(window.navigator.userAgent.indexOf("Firefox")>=1)
        {
            if(obj.files)
            {
                return obj.files.item(0).getAsDataURL();
            }
            return obj.value;
        }
        return obj.value;
    }
}
</script>
    </head>
    <body>
        <input type="button" onclick="addComponent();" value="添加文件" />
        <br />
        <form onsubmit="return true;" action="/struts2/test/upload.action"
            method="post" enctype="multipart/form-data">
            <span id="files"><input type='file' name='upload' onchange="document.getElementById('img').src=getFullPath(this);"/>
            <input type="hidden" id ="hiddeninput">
            <img id="img" width="230" height="210" />
                <p />
            </span>
            <input type="submit" value="上传" />
        </form>
    </body>

</html>

 

三、方法3

 

 

 

 

 

分享到:
评论

相关推荐

    PHP上传图片带预览功能

    在PHP开发中,图片上传和预览功能是常见的需求,特别是在构建网站或Web应用程序时。这一功能允许用户上传他们的图片,并在提交前...总之,PHP的图片上传和预览功能是一个实用且重要的技术,它能够极大地提升用户体验。

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    综合上述,JS与ASP.NET的结合使用使得图片上传和预览功能变得更加高效和直观。开发过程中,还需要注意安全性问题,比如防止文件类型攻击、大小限制等。同时,为了兼容不支持HTML5特性的旧版浏览器,可能需要提供降级...

    多文件预览上传-多图片预览上传

    - 预览功能通常基于FileReader API,它可以读取文件内容并将其转化为可以在页面上显示的格式,例如图片可以转换为Data URL(Base64编码)显示在img标签中。 - 对于非图片文件,可能需要其他方式展示预览,如文本...

    多图片上传带图片预览功能

    在IT领域,多图片上传和图片预览功能是网页应用中常见的需求,尤其在社交媒体、电商网站和内容管理系统中。这个ASP程序提供了这样的功能,允许用户在上传多张图片前进行预览,提高了用户体验和交互性。下面我们将...

    .net批量上传图片带预览功能

    总的来说,".net批量上传图片带预览功能"这个项目涵盖了.NET Web开发中的文件上传、前端交互和用户体验优化等多个知识点,对于学习和实践.NET Web开发具有很高的参考价值。通过理解并实践这些代码,开发者可以提升...

    bootstrap图片上传和预览

    在这个场景下,我们讨论的是如何在Bootstrap环境中实现图片的上传和预览功能。 首先,我们要了解`bootstrap-fileinput`,这是一个基于Bootstrap的高级文件输入插件,由Krajee提供。这个插件极大地扩展了...

    js上传多个图片预览

    在JavaScript(js)中实现多个图片的上传预览功能是一项常见的需求,特别是在Web开发中,尤其是在用户需要在提交前查看选定图片的效果时。这个功能可以让用户在上传图片之前看到一个实时的预览,提高用户体验。以下...

    多图片预览js

    在网页开发中,多图片预览功能是必不可少的,尤其在涉及到用户上传图片的场景,如社交媒体、电商平台等。这个“多图片预览js”功能就是利用JavaScript编写的一种技术,它允许用户在上传图片之前先进行预览,提高用户...

    前端页面图片上传即时预览功能

    在前端开发中,图片上传即时预览功能是一个常见的需求,特别是在网页表单、社交媒体平台或者内容编辑器等场景。这个功能允许用户在选择图片后,能够在页面上立即看到即将上传的图片,提供一种直观的反馈,提升用户...

    .Net图片上传预览

    综上所述,实现.NET图片上传预览功能涉及前端图片的Base64编码预览、后端的文件接收和验证、异步处理、错误处理以及安全策略等多个方面。理解并熟练掌握这些知识点,能够帮助开发者构建稳定、安全且用户体验良好的...

    用原生JS实现的多张图片上传及预览功能(兼容IE8)(HTML+CSS+JS代码)

    这个项目使用原生JavaScript实现了多张图片的上传和预览功能,且兼容到低版本浏览器如IE8。我们将深入探讨这个功能的实现原理。 首先,我们需要了解HTML部分。在页面中,通常会有一个`&lt;input type="file"&gt;`元素用于...

    flex图片上传带预览功能

    本文将详细讲解如何使用Adobe Flex实现一个具有图片上传和预览功能的应用。 首先,Flex是一种开源的开发框架,基于ActionScript 3.0,用于构建富互联网应用程序(RIA)。在Flex中,我们可以利用Flash Player或Adobe...

    纯 js 实现得 图片上传预览插件

    综上所述,这个纯JS实现的图片上传预览插件利用了HTML5的File API和FileReader API,结合原生JavaScript的DOM操作和事件监听,实现了用户友好的图片预览功能。开发者可以根据实际需求进行定制,比如增加图片裁剪、...

    支持批量上传、JS图片预览的前端上传组件

    这个组件设计用于处理用户在Web应用中上传多个文件的需求,同时提供了图片预览功能,提高了用户的交互体验。 首先,批量上传是一种常见的用户需求,尤其在处理大量图片或者文件时。这种功能通常依赖于HTML5的File ...

    Javascript写的多图片上传带图片预览功能

    本文将详细讲解如何使用JavaScript实现多图片上传并带有预览功能,以及后台使用C#.NET的HttpHandler进行文件上传处理。 首先,让我们关注前端部分,即JavaScript实现的多图片预览功能。在JavaScript中,我们可以...

    图片上传即时预览

    本项目是基于ASP.NET后端技术和jQuery前端库实现的,下面我们将深入探讨这两个技术以及如何结合它们来创建图片上传即时预览功能。 首先,ASP.NET是由微软开发的一款强大的Web应用程序框架,它构建在.NET Framework...

    多图片上传预览控件

    在“多图片上传预览控件”中,`jQuery`起到了核心作用,它提供了一套简洁的API,用于处理DOM操作、事件绑定和数据传输,使得图片上传和预览功能的实现变得简单高效。 接下来是图片上传的核心过程。当用户选择图片后...

    最好的无组件图片上传插件-带JS预览功能

    这款插件无需额外安装任何组件,简化了图片上传流程,同时提供了JavaScript(JS)预览功能,让用户体验更佳。 首先,我们要理解什么是“无组件图片上传”。在传统的图片上传过程中,通常会依赖Flash、Silverlight等...

    图片上传本地预览插件

    在IT领域,图片上传本地预览插件是一个常见的功能组件,尤其在网页应用和桌面软件中,它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前,能够在本地环境中预览图片效果,确保图片的...

    HTML5 图片上传 带预览功能 (pc,手机都能适配)

    在现代Web开发中,用户体验是至关重要的,而HTML5提供了许多增强用户体验的新特性,其中之一就是图片上传和预览功能。这个特性使得用户在上传图片前能够预览选定的图片,提高了交互性和可用性,尤其在移动端设备上...

Global site tag (gtag.js) - Google Analytics