6.上传前图片预览

1、html 代码:

<div class="file-box">
<form action="upload.class.php" id="form_id" method="post" enctype="multipart/form-data" >
<input type="file" name="imagename" id="imagename" onblur="getimage(this)" />
<input type="button" class="btn" value="上传" onclick="form_register();" />
</form>
<img id="img_id" />
</div>

2、js代码

function getimage(obj)
{ 
  var pic = obj.files[0];
  var freader = new FileReader();
  freader.readAsDataURL(pic);
  freader.onload = function(e) {
  document.getElementById(‘img_id‘).attr("src",e.target.result);
  }

}

时间: 2024-08-29 12:56:29

6.上传前图片预览的相关文章

文件上传之图片预览

一.业界现状分析 有时候我们需要在上传图片之前为用户提供图片预览的功能,HTML5规范出来之前,由于缺少原生的File API支持,我们需要借助Flash或者浏览器插件来满足这种需求.有了HTML5,我们可使用URL或者FileReader对象实现预览功能. 二.应用场景 图片分享类的应用,如Flickr,Facebook.相册应用,如:QQ相册. 虽然139邮箱没有合适的应用场景,但是可将技术预研的成果作为技术储备,好东西总有用得着的时候. 三.编码实现 方式一:window.URL (1).

图片上传前的预览(PHP)

1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post" action="upload.php"><input type="file" name="file1" id="file1" /></form>2.试下效果: 判断文件类型:当用户选择了一

dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarDiskFileItemFactory fac = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(fac);upload.setHeaderEncoding("utf-8"); Html代

input实现多文件上传及图片预览

通过使用html的input标签可以实现文件上传比如 <input id="file" type="file" name="upload" multiple onchange="showch();"> 其中将type属性设为file. 添加multiple实现多文件上传入下图所示: 通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性 获得文件属性的js代码如下: <script type

11.27 上传下载 图片预览

代码页面 using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls; public partial class Default2 : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { } pr

jquery实现图片上传前本地预览

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery1.8.3-min.js"></script></head><body><div style="width:500p

js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题

1 <script type="text/javascript" language="javascript"> 2 function PreviewImg(imgFile){ 3 document.getElementById("idImg").style.display = "none";//隐藏初始化图片的显示,让过滤器显示 4 var newPreview=document.getElementById(&q

HTML5文件上传前本地预览

HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

图片上传前/时预览

if (fileInputObj.files && fileInputObj.files[0]){ var reader = new FileReader(); reader.onload = function(evt){ prevDiv.innerHTML = '<div id="flowChart"><img src="' + evt.target.result + '" /></div>'; } reader