html   上传图片,本页预览

直接上代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片上传预览</title><script type="text/javascript">
   function imgPreview(fileDom){
       //判断是否支持FileReader
       if (window.FileReader) {            var reader = new FileReader();
       } else {
           alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
       }        //获取文件
       var file = fileDom.files[0];        var imageType = /^image\//;        //是否是图片
       if (!imageType.test(file.type)) {
           alert("请选择图片!");            return;
       }        //读取完成
       reader.onload = function(e) {
           //获取图片dom
           var img = document.getElementById("preview");            //图片路径设置为读取的图片
           img.src = e.target.result;
       };
       reader.readAsDataURL(file);
   }</script></head><body>
   <img id="preview" />
   <br />
   <input type="file" name="file" onchange="imgPreview(this)" /></body></html>

时间: 2024-11-03 21:06:13

html   上传图片,本页预览的相关文章

HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 这篇博客直接在上篇的基础上完成,最终效果: 效果图1: 效果图2: 好了,请允许我把图片贴了两遍,方便大家看效果了~ 可以看出我们的图片的li的html其实还是挺复杂的,于是我把html文档做了一些修改: <span style=&quo

BookBlock - 效果非常真实的书本翻页预览

这个名为 BookBlock 的图片预览效果是一个书展示或网上书店的概念,已全屏打开3D页面导航网格的形式显示图书的详细信息.我们可以打开书预览的摘录,其中有一些细节的网格.对于图书预览,我们在使用 BookBlock 全屏展示,对于更小的书本我们使用3D的方式打开. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用

3种上传图片并实现预览的方法

在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 1 <!DOCTYPE html> 2 <ht

在tp下UMeditor上传图片成功,预览失败

我的是tp3.2  上传编辑器图片时候处理的图片的类用的是UM自带的imagUp.class.php, 将UMeditor1.2.2放到  shop/Public/statics/下面 在上传图片的时候图片显示 用bug工具查看显示图片路径少了shop(项目根路径) 需要修改UM的配置文件umeditor.config.php 修改  ,imagePath:'/shop/Upload/image/umeditor/' <?php window.UMEDITOR_CONFIG = { //为编辑器

javascript和HTML5上传图片之前实现预览效果

一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内允许一次放置多个文件,控件内的每一个用户选择的文件都是一个file对象,而FileList对象是file对象的列表: 比如如下代码: 选择文件<input type="file" id="file" multiple size="80"/>

页面上传图片后立即预览

页面上的应用大多都有在个人信息管理中设置头像的这么一个功能,而对于实现这个功能前提就是上传头像的功能,而当上传完成即可预览是所有后续操作的前提.在网上巴拉了一番,然后整理了一下,拼凑了一个小demo供大家学习.本博文出自博客园,作者Red,联系邮箱 [email protected],转载请保留本文原文链接http://www.cnblogs.com/itred/p/5723864.html. 这个demo基本可以实现页面上打开页面后,点击上传头像图片的按钮,经过选择,上传成功后即可在页面指定位

C#.net4建设网页上传图片前客户端预览图片不能显示

搞了好半天,完全照教学资料设的javascrip脚本,但就是显示不了,后来才发觉,原来客户端要把该网站设为信任才能显示. 所以记录一下,以后备查. <script type="text/javascript">        function showphoto() {            alert(document.getElementById("FileUpload1").value);            //把所选图片的全路径+文件名以“f

js上传图片前进行预览

<script type="text/javascript"> //图片上传预览    IE是用了滤镜. function previewImage(file) { var MAXWIDTH = 260; var MAXHEIGHT = 180; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.style.display = "

上传图片在前台预览

前端做做图片上传功能时,经常想上传完后可以直接预览,这时候通常有两种方式,一种就是转成base64编码,然后展示出来. document.getElementById('file').onchange = function(){ var reader = new FileReader(); reader.readAsDataURL(this.files[0]); reader.onload = function(e) { document.getElementById('img').src =