// 图片预览功能
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);
}
};
- 浏览: 198085 次
文章分类
最新评论
- text.zip (1 KB)
- 下载次数: 0
发表评论
-
不会Object.defineProperty你就out了
2017-12-05 09:30 524http://imweb.io/topic/56d40adc ... -
avalon如何在兼容ie的情况下做到双向绑定呢?
2017-12-05 09:37 1204avalon可以兼容到ie6,貌似它的双 ... -
前端设备指纹
2017-09-05 19:33 2888前端设备指纹的生成,可使用fingerprintjs2 ... -
JS中document.execCommand()的用法
2016-08-14 12:36 835document.execCommand()方法处理Htm ... -
Javascript标准DOM Range操作
2016-08-13 16:40 18072级DOM定义了一个createRange()方法,如果是 ... -
js 中的selection对象使用笔记+光标定位
2016-08-13 15:39 8941IE:document.selection Fir ... -
require.js模块加载器的基本用法
2016-02-01 17:44 694require.js是一种基于AMD ... -
JS中的双向数据绑定及Object.defineProperty方法
2016-08-13 15:42 555缘起 前几天在看一些流行的迷你mvvm框架(比如 ava ... -
window.onload、DOMContentLoaded和$(document).ready()
2016-01-15 14:43 869<html xmlns="http://ww ... -
JS中浮点数运算误差处理
2015-10-22 16:11 1227先来个简单的代码片段: > console.log ... -
动画缓动效果
2015-06-30 09:54 710<!DOCTYPE html> <ht ... -
这些年,我收集的JavaScript代码(一)
2015-06-08 09:12 496一、取URL中的参数 function getPara ... -
JS中手动触发事件的方法
2015-06-05 13:51 1450如果大家将一张网页看成一个form的话,大致上就成了一个 ... -
javascript oop编程 — 实现继承的三种形式(3)
2015-05-26 15:27 554工厂制造新对象这个继承的想法相对简单,就是你需要什么 工厂制造 ... -
javascript oop编程 — 实现继承的三种形式(2)
2015-05-26 15:27 528借助另一个函数的过程,修改他的context来实现,假设两个类 ... -
javascript oop编程 — 实现继承的三种形式(1)
2015-05-26 15:24 732(1)模拟类的方式, 我们都知道js是原型继承机制,不存 ... -
JavaScript内存优化
2015-03-17 17:55 821相对C/C++ 而言,我们所用的JavaScript 在内存 ... -
js 中 document.createEvent的用法-转载
2014-03-13 14:48 1060<a class="comment-mod& ... -
如何用JavaScript标准语法,取代jQuery的一些主要功能
2013-06-08 13:41 847一、选取DOM元素 jQuery的核心是通过各种选择器,选中 ...
相关推荐
在IT行业中,图片上传即时预览是一项常见的功能,特别是在网页应用和社交媒体平台中。这个功能允许用户在上传图片之前能够看到即将上传的图片效果,提高了用户体验。本项目是基于ASP.NET后端技术和jQuery前端库实现...
在前端开发中,图片上传即时预览功能是一个常见的需求,特别是在网页表单、社交媒体平台或者内容编辑器等场景。这个功能允许用户在选择图片后,能够在页面上立即看到即将上传的图片,提供一种直观的反馈,提升用户...
在IT领域,图片上传即时预览效果是一种常见的用户体验优化功能,尤其在网页和移动应用中。这个功能允许用户在选择图片后立即看到所选图片在实际应用中的展示样式,无需等待图片完全上传到服务器。这样的设计可以提升...
本文将详细介绍如何使用JSP(JavaServer Pages)来实现`input type="file"`标签的图片上传即时预览功能。 首先,我们要理解HTML中的`<input type="file">`标签,它是用来让用户选择本地文件的。当我们设置`*">`时,...
1. **实时预览**:用户在选择图片后,插件能够即时显示图片预览,让用户体验更佳,也可以帮助用户确认上传的图片是否符合预期。 2. **多文件上传**:允许用户一次性选择并上传多个图片,提高了上传效率。 3. **...
该函数接收四个参数:`divImage`表示预览图片的容器ID,`upload`为文件输入框对象,`width`和`height`分别指定预览图片的宽度和高度。 - **浏览器兼容性处理**: - 对于**Firefox**等现代浏览器,使用`getAsDataURL...
预览图片后,我们可能还需要生成缩略图,以减小数据传输量或适应不同的展示尺寸。这里我们可以利用HTML5的Canvas元素。 1. 创建一个canvas元素,并获取其2D渲染上下文。 ```javascript var canvas = document....
这个“上传图片并预览Demo”着重于实现用户选择图片后即时预览的功能,提高用户体验。下面我们将详细探讨这一主题。 首先,我们需要了解上传图片的基本流程。当用户选择图片后,前端通常会通过HTML5的`...
在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的File API和JavaScript来实现在用户选择图片后即时预览,以及鼠标悬停时展示大图的效果。 1. **File API**:HTML5的File API允许开发者在...
3. **图片预览**: 使用HTML5的FileReader API,可以在用户选择文件后即时预览图片。该API允许在上传之前读取文件内容,创建一个数据URL,然后在img标签的src属性中设置这个URL,实现预览效果。 4. **删除功能**: ...
**editor.md编辑器** 是一个强大的Markdown编辑器,它的核心特性是提供了实时预览功能,让用户在编写Markdown语法的同时能够即时看到排版效果。Markdown是一种轻量级的标记语言,它允许用户用易读易写的纯文本格式...
本文将详细讲解如何在ASP.NET环境中实现图片上传后的即时预览,以及考虑不同浏览器的兼容性问题。 首先,我们需要理解ASP.NET上传图片的基本流程。在ASP.NET中,通常使用FileUpload控件让用户选择本地的图片文件。...
可以使用FileReader API来读取文件内容,并生成预览图,显示在页面上,让用户即时看到上传图片的效果。 2. **表单提交**:当用户确认图片预览无误后,前端通过AJAX或者传统的HTTP表单提交,将图片数据发送到服务器...