<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 在ie中 运行最新的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 让宽度 等于 移动设备的 宽度  真是分辨率-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    
    <!-- Bootstrap -->
    <link href="resource/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="resource/css/style.css">
    <!-- IE 版本 低于 IE9  则 启动 注视部分的 代码 -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
   <p>
   <label>请选择一个图像文件：</label>
   <input type="file" id="file_input" /> 选择图片的input按钮
   <div id="rrr"></div>//拿来放图片用的
</p>

</body>

<script type="text/javascript">
console.log(1)
var aaa = document.getElementById("rrr"); //获取显示图片的div元素
var input = document.getElementById("file_input"); //获取选择图片的input元素
      
      //这边是判断本浏览器是否支持这个API。
if(typeof FileReader==='undefined'){
    aaa.innerHTML = "抱歉，你的浏览器不支持 FileReader";
    input.setAttribute('disabled','disabled');
}else{
    input.addEventListener('change',readFile,false); //如果支持就监听改变事件，一旦改变了就运行readFile函数。
}

function readFile(){
    var file = this.files[0]; //获取file对象
    //判断file的类型是不是图片类型。
    if(!/image\/\w+/.test(file.type)){
        alert("文件必须为图片！");
        return false;
    }
    
    var reader = new FileReader(); //声明一个FileReader实例
    reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件
    //最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片
    reader.onload = function(e){
        aaa.innerHTML = '<img src="'+this.result+'" alt=""/>'
    }
}
</script>
</html>

js 实现图片上传 续的更多相关文章

  1. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  2. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  3. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  4. js判断图片上传时的文件大小，和宽高尺寸

    今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...

  5. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  6. PHP+js实现图片上传，编辑

    文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字: 然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面: 最后表单提交时,把文件信息 ...

  7. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  8. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  9. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

随机推荐

  1. Psping 实例

    PsPing v2.1 https://docs.microsoft.com/zh-cn/sysinternals/downloads/psping 2016/06/29 4 分钟阅读时长 By Ma ...

  2. spring boot 之热部署

    热部署:当发现程序修改时自动启动应用程序. spring boot使用的是spring-boot-devtools是一个为开发者服务的一个模块.其原理用了classLoader 其中一个加载不变的类, ...

  3. npm设置仓库

    如果国外官方的npm仓库下载速度很慢的话,可以考虑更换npm仓库,加快下载包的速度. 1.通过config命令 npm config set registry https://registry.npm ...

  4. Double H4.0

    Double H4.0 修改完善已提交的需求规格说明书 https://docs.qq.com/doc/DTGxWRkh6c3ZLVldq?tdsourcetag=s_pcqq_file_edit&a ...

  5. Java 复制一个文件到另外一个目录下

    因为项目部署在jboss上面,在上传一些图片的时候,把他上传到当前项目的下,比如:(这里是以Windows服务器为例的,当然linux也是一样的) D:\jboss-eap-6.4\domain\se ...

  6. Servlet不是线程安全的。

    要解释为什么Servlet为什么不是线程安全的,需要了解Servlet容器(即Tomcat)使如何响应HTTP请求的. 当Tomcat接收到Client的HTTP请求时,Tomcat从线程池中取出一个 ...

  7. linux磁盘分区格式化-fdisk命令工具

    本文主要讲述使用fdisk工具对磁盘进行分区和格式化的方法 首先要明确分区是针对磁盘进行的操做,磁盘分区会创建分区表,类似vda,sda的是磁盘,vda1,sda1的是分区 1.查看磁盘分区状态 1. ...

  8. winodws同步时间命令

    首先,你应该判断你的两台域控制器,哪一台担任PDC角色(默认的域内权威的时间服务源). 判断方法很简单,单击“开始”,单击“运行”,键入dsa.msc,然后点确定.这时会打开“Active Direc ...

  9. hdu 4336 Card Collector——最值反演

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4336 点集中最早出现的元素的期望是 min ,最晚出现的元素的期望是 max :全部出现的期望就是最晚出现 ...

  10. 02 - Unit09：动态SQL

    动态SQL 什么是? 系统运行过程中,动态生成的SQL语句 为什么? 当我们不能确定用户操作,所要使用的具体SQL的时候. 案例: 搜索笔记功能 按用户名 笔记本名 笔记名 搜索 搜索功能 按用户 A ...