编辑图片时,能够实时显示上传的图片(预览)

html代码:

js代码:

$("#store_img").on("change",function(){

  var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径,该路径不是图片在本地的路径

   if (objUrl) {

    $(".hide_img img").attr("src", objUrl) ; //将图片路径存入src中,显示出图片

  }

});

//建立一個可存取到該file的url

function getObjectURL(file) {

  var url = null ;

  if (window.createObjectURL!=undefined) {   // basic

     url = window.createObjectURL(file) ;

  }

  else if (window.URL!=undefined) {              // mozilla(firefox)

     url = window.URL.createObjectURL(file) ;

   }

  else if (window.webkitURL!=undefined) {   // webkit or chrome

    url = window.webkitURL.createObjectURL(file) ;

   }

   return url ;

}

时间: 2024-08-10 15:38:25

编辑图片时,能够实时显示上传的图片(预览)的相关文章

文件上传之图片预览

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

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

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="

jquery上传多图片预览

(php+ajax配合) 手机上兼容. 姑姑,过儿学会了......

c#-Winform实时显示上传下载速率

代码如下: using System; using System.Drawing; using System.Collections; using System.ComponentModel; using System.Windows.Forms; using System.Data; using Echevil; namespace Network_Monitor_Sample { /// <summary> /// Summary description for Form1. /// &l

MVC应用程序显示上传的图片

前两篇<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html和<MVC应用程序实现上传文件(续)>http://www.cnblogs.com/insus/p/3594834.html,我们练习了上传文件,当然上传图片也是一样. 此篇我们练习,怎样在MVC应用程序中显示用户上传的图片.为了接近更真实的练习,Insus.NET决定对以前的程序修改一下,就是上传的目录把原来的Temp目录改为UploadFiles目录.也就是

关于confluence上传文件附件预览查看时出现乱码的问题解决办法

在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候无法识别文档字体,所以才会出现乱码.还比如某个业务有个功能生成图片,结果图片里的字全变空格了,这也是服务器上没相应的字库造成的. 1.解决办法:在服务器上安装中文字体.操作方法如下: 1)先安装想要的字体, 如楷体等, 从本机"c盘->Windows-Fonts"文件夹里复制simk