<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>上传一下看看</title>

</head>

<body>

<form action="__SELF__" method="post" onsubmit="return checkfilefun()">

    <input type="file" id="pic" name="pic[]" multiple="multiple">

    <input type="submit" value=" 提交查看信息 ">

</form>

<img src="" alt="" id="previewImage">

<script>

    function checkfilefun() {

        var files = document.querySelector('#pic').files;

        for (var i = 0, f; f = files[i]; i++) {

            if (!f.type.match('image.*')) {

                continue;

            }

            var reader = new FileReader();

            reader.onload = (function (theFile) {

                return function (e) {

                    document.getElementById('previewImage').src = e.target.result;

                };

            })(f);

            reader.readAsDataURL(f);

        }

        return false;

    }

</script>

</body>

</html>

Html5上传后有所见图片效果前端代码实现的更多相关文章

  1. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  2. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  3. html5上传本地图片,在线预览及裁剪(filereader,canvas)

    1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...

  4. magento 1.9 上传后图片前后台无法正常显示

    1.上传后图片不显示,设置 允许 flash 2.保证php 执行是内存大小至少为为128M,多种方式设置,这里以init_set为例子,在index.php 加入下面一行代码,根据情况而定 ini_ ...

  5. ueditor百度编辑器中，多图上传后，图片顺序乱掉的处理方法

    上传后,图片的顺序和预期的不一致,需要修改ueditor的源码. 一.找到editor/dialogs/attachment/attachment.js文件 1.将_this.fileList.pus ...

  6. 改变wordpress图片上传后的压缩质量

    WordPress 在图片上传后会默认压缩图片质量为原来的 90%,这样做的好处可以极大的加快页面的载入速度与缩小图片大小所占服务器空间. 如果希望 100% 原质量怎么办呢?如何禁止 WordPre ...

  7. django实现图片上传后自动修改尺寸并保存修改后的图到数据库和本地文件系统

    图片上传首先要是设置settings.py文件(与静态文件设置类似) MEDIA_ROOT = os.path.join(BASE_DIR,'media')MEDIA_URL = '/media/' ...

  8. iOS图片上传后被旋转的问题

    最近用PHP做了一个图片合成程序,前端是通过HTML的file input选取自定图片,POST到php后台调整尺寸后与事先准备好的背景图进行合成. 通过测试发现,上传后的自定图片有的被旋转了,有的是 ...

  9. js实现图片上传后即时预览

    //关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...

随机推荐

  1. android 定时任务

    使用timertask进行定时任务 首先创建TimerTask: class SynchroTimerTask extends TimerTask { @Override public void ru ...

  2. Android ListView 多样式Item的一个注意点:(

    闲来无事,在写一个多样式Item的ListView的Demo时,遇到了一个以前没遇过的问题; ╮(￣▽￣")╭ 我们知道,ListView里可以有多种样式的item, 实现只需要重写: @O ...

  3. 转的： 重绘ListView 修改标题颜色

    1.owerDraw 设置为true 2.实现事件 DrawColumnHeader DrawItem DrawSubItem private void listView1_DrawColumnHea ...

  4. 设置ubuntu 下git 的用户名和邮箱

    设置ubuntu 下git 的用户名和邮箱 摘自  慢慢修远路,上下求索心http://yanshaozhi.iteye.com/blog/386752 虽然我没看怎么明白 但我用第一总方法就设置好了 ...

  5. 转发-UI基础教程 – 原生App切图的那些事儿

    UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切 ...

  6. Linux下mysql忘记root密码

    一台机器上的MYSQL服务器很久没用了,忘了root密码无法连接.一时情急,网上搜寻办法,解决,记录在此备用. 修改MySQL的登录设置:  //不同的版本的Linux配置文件的位置也不一样,以Lin ...

  7. Installshield调用DLL的正确姿势

    脚本如下 szDllPath = SUPPORTDIR ^ "TestCom.dll";       set oMyTest = CoCreateObjectDotNet(szDl ...

  8. android安全测试 APP要点解析

    评估思路 移动APP面临的威胁 风起云涌的高科技时代,随着智能手机和iPad等移动终端设备的普及,人们逐渐习惯了使用应用客户端上网的方式,而智能终端的普及不仅推动了移动互联网的发展,也带来了移动应用的 ...

  9. 写给笨蛋徒弟的学习手册（1）——完整C#项目中各个文件含义

    Bin 目录用来存放编译的结果,bin是二进制binrary的英文缩写,因为最初C编译的程序文件都是二进制文件,它有Debug和Release两个版本,分别对应的文件夹为bin/Debug和bin/R ...

  10. acm数学（转）

    这个东西先放在这吧.做过的以后会用#号标示出来 1.burnside定理,polya计数法    这个大家可以看brudildi的<组合数学>,那本书的这一章写的很详细也很容易理解.最好能 ...