`

上传图片本地预览

阅读更多
<html>
   <head>
     <title>a test for selection object</title>
     <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
     <script type='text/javascript'>
        $(function(){
            $("#addImage").click(function() {
                 if($("ul#files li").size() < 6){
                       $("<li><input type='file' accept='image/bmp,image/png,image/gif,image/jpeg' value='' name='upload' onchange='previewImage(this)'>&nbsp;(图片格式:*.bmp,*.png,*.gif,*.jpeg)<input type='button' value='删除' onclick='removeItem(this)'/><div class='preview'></div></li>").appendTo("#files"); 
                  } else {
                  alert("添加图片数量不能超过6个");
                }
             });
        });

        function removeItem(obj) {
           $(obj).parent("li").remove();
        };

        function previewImage(file)
    {
      var MAXWIDTH  = 200;
      var MAXHEIGHT = 200;
      var div = file.parentNode.childNodes[3];
     
       if (file.files && file.files[0])
       {
        div.innerHTML = '<img class=imghead>';
        var img = div.getElementsByTagName('img')[0];
        img.onload = function(){
         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]);
       }
      else
       {
          var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
          file.select();
          var src = document.selection.createRange().text;
          var i = 0;
          div.innerHTML = "<img id=imghead>";
          i = i + 1;
          //div.innerHTML = '<img class=imghead>';
          var img = div.getElementsByTagName('img')[0];
          img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
      
          //TODO临时解决
          var rect = {top:44, left:0, width:200, height:113};
          status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
          div.innerHTML = "<div class='divhead' style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";
         
          //var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
          //status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
          //div.innerHTML = "<div class='divhead' "+200+"px;height:"+200+"px;margin-top:"+200+"px;margin-left:"+200+"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;
    }
</script>
   </head>
<body>
     <form>
        <ul id="files">
            <li><input type="file" onchange="previewImage(this)" class="input-file" id="ss" accept="image/bmp,image/png,image/gif,image/jpeg" value="" name="upload">&nbsp;(图片格式:*.bmp,*.png,*.gif,*.jpeg)<label class="error"></label><div class="preview" id="preview"></div></li>
        </ul>
          <input id="addImage" type="button" value="继续添加" />
     </form>
   </body>
</html>  

备注:
IE下会有问题
分享到:
评论

相关推荐

    上传图片本地预览效果

    在现代Web应用中,"上传图片本地预览效果"是一个常见的功能,特别是在社交媒体、电子商务、图像编辑等场景中。这个功能允许用户在选择图片后,无需等待上传完成就能在页面上即时预览所选的图片,提升了用户体验。...

    jquery 上传图片本地预览

    首先,我们要理解`jquery 上传图片本地预览`这个功能的核心需求。用户在选择图片文件后,无需等待文件上传到服务器,就能在页面上看到所选图片的预览效果。这极大地提升了用户体验,尤其是在网络速度较慢的情况下。 ...

    图片上传本地预览插件

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

    jsp 本地图片上传前的预览

    在用户上传图片之前提供预览功能,能够提升用户体验,让用户在正式提交前确认图片效果。本项目着重讨论如何在Java JSP环境下实现本地图片的预览功能,结合jQuery库来增强前端交互。 首先,我们要理解JSP(Java...

    h5实现上传图片本地预览

    这个html文件用html5实现了本地图片上传,在上传服务器前回显预览的功能

    jQuery点击头像上传本地预览裁剪图片

    在IT领域,尤其是在Web开发中,用户界面的交互性至关重要,而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片,提高了上传过程的可控性和便捷性...

    详解nodejs实现本地上传图片并预览功能(express4.0+)

    写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过...

    C#上传图片预览11111

    本主题聚焦于"C#上传图片预览",这是一个常见的功能需求,无论是在网页上还是桌面应用中,用户通常希望在实际上传图片前能预览图片效果。这一功能不仅提升了用户体验,也减少了因误传错误图片而造成的困扰。 在C#中...

    Jquery 表单验证+本地图片上传-切割-预览

    在本项目中,"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例,它涵盖了几个重要的JavaScript库和技术,包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释:...

    jQuery实现的上传图片本地预览效果简单示例

    实现上传图片本地预览效果是前端开发者必备的技能之一。通过本示例,我们学习了如何利用jQuery简化代码实现过程,实现文件上传后的本地预览功能,这对于提升用户交互体验具有实际意义。同时,了解并掌握本示例中的...

    jquery 本地上传图片预览Demo

    虽然本地预览提供了良好的用户体验,但需要注意安全问题。Base64编码的图片数据可能会暴露用户硬盘上的敏感信息。因此,确保只预览用户预期上传的图片,避免其他文件类型的滥用。 5. **性能优化**: 对于大尺寸...

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

    在.NET开发环境中,批量上传图片并提供预览和进度条功能是常见的需求,尤其是在构建Web应用时。这个项目提供了一种实现方式,包括源码,可以直接用于开发中。以下是对这个知识点的详细解释: 批量上传图片:批量...

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

    在图片上传中,JS通常用于处理用户选择文件后在本地预览图片,验证文件类型和大小,以及提供一个友好的用户体验,如进度条显示上传进度。 1. **图片预览**:使用HTML5的FileReader API,开发者可以读取用户选择的...

    本地图片上传即时预览

    标题中的“本地图片上传即时预览”是一个常见的前端开发功能,尤其在网页表单、社交媒体应用或者在线编辑器中非常普遍。这个功能允许用户在选择本地图片后立即在页面上看到预览效果,无需等待图片实际上传到服务器。...

    图片上传,html页面,本地预览,后台前台页面代码都有

    在本项目中,"图片上传,html页面,本地预览,后台前台页面代码都有" 提供了一个完整的解决方案,包括前端用户界面和后端服务。 首先,我们来看前端部分。前端页面通常使用HTML配合JavaScript(JS)来实现用户交互...

    PHP上传图片带预览功能

    上传图片"&gt; ``` 这里的`enctype="multipart/form-data"`属性是必须的,因为它允许我们发送二进制数据(如图片)到服务器。 接下来,我们需要在`upload.php`文件中处理上传请求。PHP的`$_FILES`全局数组包含了...

    input file上传图片预览

    在前端开发中,"input file上传图片预览"是一个常见的需求,它允许用户选择本地的图像文件,并在上传前提供预览。这个功能在许多网站和应用中都很实用,例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...

    html5图片上传本地生成缩略图预览

    HTML5图片上传与本地生成缩略图预览是现代网页应用中常见的功能,它极大地提升了用户体验,特别是对于涉及图像处理的网站。这个功能利用了HTML5的一些新特性,包括File API、Canvas和Data URL。接下来,我们将深入...

    上传视频并预览

    在IT行业中,视频上传和预览是Web应用中常见的功能,尤其在社交媒体、教育平台以及视频分享网站等。本文将详细解析如何使用PHP实现视频上传并进行预览的流程。 首先,我们需要理解视频上传的基本原理。在Web环境中...

Global site tag (gtag.js) - Google Analytics