JavaScript实现单图片上传并预览功能

本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>单图片上传并实现预览</title>
  <style>
      /*上传图片*/
    .addPerson{
      line-height: 190px;
    }
    .addPhoto{
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 40px;
      text-align: center;
      vertical-align: middle;
      border: 1px dashed #e7eaec;
      cursor: pointer;
      display: inline-block;
    }
    .addinput{
      display: none;
    }
    .addShow{
      width: 200px;
      height: 170px;
      display: inline-block;
      vertical-align: middle;
      background: #f3f3f48f;
      margin-left: 30px;
    }
    .addShow img{
      width: 130px;
      height: 130px;
      margin: 20px auto;
      display: block;
    }
  </style>
</head>
<body>
  <div class=" addPerson">
    <label class="col-sm-2 control-label">图片上传</label>
      <div class="col-sm-9" style="display: inline-block;">
        <div class="addPhoto">+</div>
        <div class="addinput">
          <input type="file" class="addFile" onchange="previewFile()" name="sPicture">
        </div>
        <div class="addShow" style="position: relative">
          <img src="" class="addImg" alt="">
        </div>
      </div>
  </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

  $(".addPhoto").click(function () {
    $('[type=file]').click();
  });

  function previewFile() {
  var preview = document.getElementsByClassName("addImg")[0];
  var file = document.getElementsByClassName('addFile')[0].files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;

  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }

  // ajax请求如下

  // 使用FormData将图片以文件的形式传到后台
  // pictureFile后台接收的参数

  // var formdata=new FormData();
  // formdata.append("pictureFile",addFile);
  // $.ajax({
  //       url:"",
  //       type:"post",
  //       dataType:"json",
  //       data:formdata,
  //       async: false,   //四个false属性不能少
  //       cache: false,
  //       contentType: false,
  //       processData: false,
  //       success:function (data) {
  //         if(data.success){
  //           myAlert(data.msg);
  //         }

  //       },
  //       error:function () {
  //         if(data.success){
  //           myAlert(data.msg);
  //         }

  //       }

  //     })
}
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js图片上传前预览功能（兼容所有浏览器）

    网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

  • js实现图片上传预览原理分析

    js实现图片上传预览原理分析

    目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便.一直以来也就只是用用,没有想过这些插件背后的实现原理.趁着今天有点时间,也来学习学习. 追根溯源 设想 一开始,按照我的思路,预览可能是这么来实现的.本地选中一张图片,嵌入html的同时会显示图片的本地的绝对路径,然后通过js简单的进行设置,应该就可以实现预览效果了. 但是实际上,目前只有低版本的IE浏览器才能实现这么个效果.究其原因是浏览器厂商为了进一步强化安全,限制了file标签直接读取本地路径的能力,在HTM

  • php+js实现图片的上传、裁剪、预览、提交示例

    首先用到的语言是php.插件imgareaselect(下载地址),没有太多花哨的样式,index.php代码如下: 复制代码 代码如下: <!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.or

  • js 上传图片预览问题

    最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴.故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助. 我们一般根据IE6.IE7进行开发的时候写图片预览的代码是: 复制代码 代码如下: document.getElementById("img").src = document.getElementById("file").value; 还有一种方式 复制代码 代码如下: <d

  • 上传图片预览JS脚本 Input file图片预览的实现示例

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

  • JS实现上传图片的三种方法并实现预览图片功能

    JS实现上传图片的三种方法并实现预览图片功能

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

  • js实现图片上传并预览功能

    本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下 思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上.或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合. (2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮

  • js实现上传图片之上传前预览图片

    上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了.功能很简单,却很实用. 预览图片的js代码: 复制代码 代码如下: <script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObj

  • js实现上传图片预览的方法

    js实现上传图片预览的方法

    本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function PreviewImage(imgFile) {     var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);     filextension=filextension.toLowerCase();     if ((filext

随机推荐