js上传并且预览图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src = "jquery.js"></script>
</head>
<body>

<input id="upload" type="file" name="files" />

<div id = "box">

</div>
<script type="text/javascript">
var upload = document.getElementById(‘upload‘);
upload.addEventListener(‘change‘, function() {
      var file = upload.files[0];
      console.log(file.size);

      var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
      // var img = new Image();
      // img.src = this.result;
      // console.log(this.result);
      src = this.result;
      $(‘#box‘).append(
              "<img src ="+src+ ">"
          )

    };

}, false);

</script>

</body>
</html>

http://www.open-open.com/lib/view/open1456113131948.html

时间: 2024-10-13 07:02:11

js上传并且预览图片的相关文章

js上传和预览图片

[1].[代码] [HTML]代码 跳至 [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta

模拟type=file;上传并预览图片

最近项目的会员中心,要做一个上传本地img并预览的效果.效果大概是这个样子.自己以前没做过:摸着石头过河总算完成了感觉有必要整理一下,写篇博客耍耍. 整体效果大概是这个样子的: 1.点击框框任何地方:弹出选择文件窗口: 2.选择后,再框框区域预览: 3.再次点击框框,更换图片. 下面说说整个实现的过程吧. html代码的结构大概是这样的.    <div class="imgitem secondImg">        <div class="u-add-

调用微信Js-SDK上传、预览图片

$(document).ready(function(){ var url = location.href.split('#')[0]; $.get(rootPath + "/wechat/member/user/getWechatConfig?url=" + url,"",function(data){ wx.config({ debug: false, appId: data.appId, nonceStr: data.nonceStr, signature:

plupload上传前预览图片

plupload预览图片有多种方法,主要由moxie的Image提供,Image的downsize.crop.embed都可用来预览图片 1.downsize 最开始做项目的时候,我用的就是downsize来做预览图片 downsize(opts) Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions. Argume

富文本编辑器handyeditor,上传和预览图片的host地址不一样

使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHeight: true, autoFloat: false, topOffset: 0, uploadPhoto: true, uploadPhotoUrl: uploadDomain, uploadPhotoHandler: "", uploadPhotoSize: 200, upload

原生js上传 加预览 兼容ie

前提条件: ie浏览器模式下,用户要允许ie默认的加载项:以下兼容ie的方法才会生效 *********************************************************************** /*图片上传预览 IE是用了滤镜*/ function previewImage(file) { var MAXWIDTH = 60; var MAXHEIGHT = 60; var div = document.getElementById('preview'); i

js 上传文件预览

1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat

实现上传时预览图片

主要使用的类 js new FileReader 方法名 参数 描述 abort none 中断读取 readAsBinaryString file 将文件读取为二进制码 readAsDataURL file 将文件读取为 DataURL readAsText file, [encoding] 将文件读取为文本 代码 <input id="prepare" type="file" accept="" value="aaa"

HTML5 jQuery图片上传前预览

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html> <head> <title>HTML5上传图片预览</title> <meta char