`

本地图片上传即时预览

 
阅读更多

// 图片预览功能
var preivew = function(file, container){
  // 允许上传的图片格式
  var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
  var Picture = function(file, container){
    var height = 0, widht = 0, ext = '', size = 0, name = '', path = ''; var self = this;
    var tempPath = '';
    if(file){
      name = file.value;
      if (window.navigator.userAgent.indexOf("MSIE")>=1){
        file.select();
        tempPath = document.selection.createRange().text;
        if(tempPath!=""){
          path = tempPath;
        }

      }else if(file.files){
        try{
          path = file.files.item(0).getAsDataURL();
        }catch(e){
            if(window.URL){
          path = URL.createObjectURL(file.files[0]);
           }
            }
           }else{
            path = file.value;
           }
        }else{
       throw "bad file";
    }
    ext = name.substr(name.lastIndexOf("."), name.length);
    if(container.tagName.toLowerCase() != 'img'){
      throw "container is not a valid img label";
      container.visibility = 'hidden';
    }


    height = container.height;
    widht = container.widht;
    size = container.fileSize;
    this.get = function(name){
      return self[name];
    }

    this.isValid = function(){
      if(allowExt.indexOf(self.ext) !== -1){
        throw 'the ext is not allowed to upload';
        return false;
        }
      return true;
    }
    if(!this.isValid()){
      alert('the ext is not allowed to upload');
      return false;
      }
    container.src = path;
    container.alt = name;
  };

  try{
    var pic = new Picture(file, container);
  }catch(e){
    alert(e);
  }
};

分享到:
评论

相关推荐

    图片上传即时预览

    在IT行业中,图片上传即时预览是一项常见的功能,特别是在网页应用和社交媒体平台中。这个功能允许用户在上传图片之前能够看到即将上传的图片效果,提高了用户体验。本项目是基于ASP.NET后端技术和jQuery前端库实现...

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

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

    图片上传即时预览效果

    在IT领域,图片上传即时预览效果是一种常见的用户体验优化功能,尤其在网页和移动应用中。这个功能允许用户在选择图片后立即看到所选图片在实际应用中的展示样式,无需等待图片完全上传到服务器。这样的设计可以提升...

    input file图片上传即时预览

    本文将详细介绍如何使用JSP(JavaServer Pages)来实现`input type="file"`标签的图片上传即时预览功能。 首先,我们要理解HTML中的`<input type="file">`标签,它是用来让用户选择本地文件的。当我们设置`*">`时,...

    cupload本地图片上传预览插件

    1. **实时预览**:用户在选择图片后,插件能够即时显示图片预览,让用户体验更佳,也可以帮助用户确认上传的图片是否符合预期。 2. **多文件上传**:允许用户一次性选择并上传多个图片,提高了上传效率。 3. **...

    jsp图片上传及预览

    该函数接收四个参数:`divImage`表示预览图片的容器ID,`upload`为文件输入框对象,`width`和`height`分别指定预览图片的宽度和高度。 - **浏览器兼容性处理**: - 对于**Firefox**等现代浏览器,使用`getAsDataURL...

    html5移动端图片上传本地生成缩略图预览(单图上传)

    预览图片后,我们可能还需要生成缩略图,以减小数据传输量或适应不同的展示尺寸。这里我们可以利用HTML5的Canvas元素。 1. 创建一个canvas元素,并获取其2D渲染上下文。 ```javascript var canvas = document....

    上传图片并预览Demo

    这个“上传图片并预览Demo”着重于实现用户选择图片后即时预览的功能,提高用户体验。下面我们将详细探讨这一主题。 首先,我们需要了解上传图片的基本流程。当用户选择图片后,前端通常会通过HTML5的`...

    js实现上传图片即时预览

    在JavaScript(JS)中实现上传图片的即时预览是一项常见的功能,尤其在现代网页应用中。这个功能允许用户在正式提交文件之前查看所选图片的效果,提升了用户体验。下面将详细介绍如何利用JavaScript技术来实现这一...

    上传图片本地预览效果

    这个功能允许用户在选择图片后,无需等待上传完成就能在页面上即时预览所选的图片,提升了用户体验。下面将详细探讨实现这一功能所需的技术和步骤。 首先,我们要理解浏览器对文件访问的限制。出于安全考虑,浏览器...

    图片上传在线预览+图片提交

    同时,还可以通过CSS调整预览图片的尺寸和质量。 3. **图片提交**:用户确认无误后,点击提交按钮,前端发送HTTP请求(通常是POST)到后端服务器,将图片数据作为请求体的一部分。为了减少网络传输负担,可以使用...

    上传图片预览效果示例程序

    在预览图片时,通常会使用readAsDataURL方法,将文件内容转换为data URL,然后设置到img标签的src属性,实现图片的预览。 4. HTML5 `<input type="file">`:这是HTML中用于文件选择的元素,添加`accept`属性可以...

    图片上传和预览

    在这个过程中,用户能够选择本地的图片文件,将其上传到服务器,并在上传后即时看到图片的预览效果。下面将详细讲解这个过程中的关键知识点。 1. **前端部分** - **文件输入控件**:HTML5提供了`...

    图片上传控件(带预览功能)

    【图片上传控件(带预览功能)】是一款基于JSP和JavaScript技术开发的实用工具,主要用于网页中的图片上传,并且具有预览功能。在网页交互设计中,图片上传是常见的需求之一,尤其是在社交媒体、电商网站和个人博客...

    html5+js本地图片预览

    在这个“html5+js本地图片预览”的主题中,我们将深入探讨如何利用HTML5的File API和JavaScript来实现在用户选择图片后即时预览,以及鼠标悬停时展示大图的效果。 1. **File API**:HTML5的File API允许开发者在...

    java实现jQuery带删除功能多图片上传预览插件

    3. **图片预览**: 使用HTML5的FileReader API,可以在用户选择文件后即时预览图片。该API允许在上传之前读取文件内容,创建一个数据URL,然后在img标签的src属性中设置这个URL,实现预览效果。 4. **删除功能**: ...

    editor.md编辑器demo(含本地图片上传)

    **editor.md编辑器** 是一个强大的Markdown编辑器,它的核心特性是提供了实时预览功能,让用户在编写Markdown语法的同时能够即时看到排版效果。Markdown是一种轻量级的标记语言,它允许用户用易读易写的纯文本格式...

    ASP.NET 图片预览

    本文将详细讲解如何在ASP.NET环境中实现图片上传后的即时预览,以及考虑不同浏览器的兼容性问题。 首先,我们需要理解ASP.NET上传图片的基本流程。在ASP.NET中,通常使用FileUpload控件让用户选择本地的图片文件。...

    图片上传预览实例

    可以使用FileReader API来读取文件内容,并生成预览图,显示在页面上,让用户即时看到上传图片的效果。 2. **表单提交**:当用户确认图片预览无误后,前端通过AJAX或者传统的HTTP表单提交,将图片数据发送到服务器...

Global site tag (gtag.js) - Google Analytics