JavaScript中的FileReader图片预览上传功能实现代码

 更新时间:2017年07月24日 15:52:13   作者:shengmeshi  
本文通过实例代码给大家介绍了js中的FileReader图片预览上传功能,代码分为html和js代码两部分,具体实现代码大家参考下本文

关于filereader图片预览上传功能的实现代码如下所示:

html:

<div style="width:200px;height:200px;">
 <label for="ceshi" style="display:block;">
  <img style="width:200px;height:200px;" id="image" src=""/>
  <input id="ceshi" type="file" onchange="selectImage(this);" hidden/>
 </label>
</div>

js:

 var image = '';
 function selectImage(file){
 if(!file.files || !file.files[0]){
   return;
 }
 var reader = new FileReader();
 reader.onload = function(evt){
  document.getElementById('image').src = evt.target.result;
  image = evt.target.result;
 }
 reader.readAsDataURL(file.files[0]);
 }
 function uploadImage(){
  console.log(image);
  $.ajax({
   type:'POST',
   url: 'ajax/uploadimage', //图片上传地址
   data: {image: image},
   async: true,
   dataType: 'json',
   success: function(data){
   if(data.success){
    alert('上传成功');
   }else{
   alert('上传失败');
   }
  },
  error: function(err){
   alert('网络故障');
  }
 });
}

引用:<script src="js/jQuery.min.js"></script>

总结

以上所述是小编给大家介绍的JavaScript中的FileReader图片预览上传功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 有道JavaScript监听浏览器的问题

    有道JavaScript监听浏览器的问题

    相信大家在web项目中,经常会用到javascript的事件监听、事件冒泡这些东西。当然也包括window.opener,window.showModalDialog这些父子窗口的互操作。
    2010-06-06
  • JavaScript实现为图片添加水印的方法详解

    JavaScript实现为图片添加水印的方法详解

    在很多地方,我们都可以看到,上传图片的时候,图片都会被加上默认的水印,因此,我们在个人网站进行图片操作时,也可以给它加上自己独特的水印,本文就为大家整理了JS添加图片合文字水印的方法,需要的可以参考一下
    2023-05-05
  • JS滚动到指定位置导航栏固定顶部

    JS滚动到指定位置导航栏固定顶部

    最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享
    2017-07-07
  • JavaScript实现各种排序的代码详解

    JavaScript实现各种排序的代码详解

    这篇文章给大家介绍了js实现各种排序功能,包括冒泡排序,选择排序和插入排序,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-08-08
  • JS将时间秒转换成天小时分钟秒的字符串

    JS将时间秒转换成天小时分钟秒的字符串

    最近小编接到这样的项目需求,接口返回的数据中时间单位为秒,但前端显示的时候需要更人性化的带有单位(天,小时,分钟,秒)的字符串;下面小编给大家带来实例代码,感兴趣的朋友跟随小编一起看看吧
    2019-07-07
  • Javascript中对象继承的实现小例

    Javascript中对象继承的实现小例

    这篇文章主要介绍了Javascript中对象继承的实现,需要的朋友可以参考下
    2014-05-05
  • js限制input标签中只能输入中文

    js限制input标签中只能输入中文

    这篇文章主要介绍了js限制input标签中只能输入中文的的相关资料,需要的朋友可以参考下
    2015-06-06
  • 记录鼠标的轨迹并回放的js代码

    记录鼠标的轨迹并回放的js代码

    用js实现的记录鼠标的轨迹并回放的效果,非常不错。
    2010-04-04
  • 微信小程序云开发之使用云数据库

    微信小程序云开发之使用云数据库

    这篇文章主要为大家详细介绍了微信小程序云开发之使用云数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • IE8对JS通过属性和数组遍历解析不一样的地方探讨

    IE8对JS通过属性和数组遍历解析不一样的地方探讨

    如果是非IE8浏览器例如(IE7、IE9、Chrome、FF,仅测试这几种)通过属性和数组遍历,其结果是一样的,但对于IE8,结果会有一点小小的差异,在IE8下会把原型链扩展方法当做一个属性输出,大家可以测试一下
    2013-05-05

最新评论