<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function(){

                function preView(preDIV){

                var files=preDIV.files;

                for (var i = 0; i < files.length; i++) {

                    var data=URL.createObjectURL(files[i]);

                    $('<img class="img-item" src="'+data+'" />').appendTo( $("#upload") );

                }

            }

                $(':file').change(function(){console.log(this);

                    preView(this);

                });

            });

        </script>

    </head>

    <body>

        <div id="upload">

        </div>

        <input type="file" value="选择图片" multiple="multiple"/>

    </body>

</html>

图片上传预览js的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

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

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

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

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

  4. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  5. js:s上次预览，上传图片预览，图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  7. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  8. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  9. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

随机推荐

  1. FastJSON基础

    对象的类型 json文本 json数组 json对象 java对象 类型的转换 json文本      转   json对象      JSON.parseObject(str) json文本     ...

  2. ubuntu上vsftpd服务配置

    Ubuntu上提供两种常用的ftp服务应用:vsftpd 和 tftpd,区别如下: 1)vsftpd 支持客户端上下传文件,支持浏览器显示及下载,支持用户名密码认证,支持匿名访问,默认端口TCP:2 ...

  3. UNIGUI与UNIURLFRAME的互动

    UniSession.JSCode('name_'+MainForm.UniURLFrame1.name+'_'+MainForm.UniURLFrame1.JSName+'.myinput4.inn ...

  4. C++回调：利用Sink

    Sink的本质是利用C++的封装.继承.多态的面向对象来实现,从实现角度来说,更优于函数指针回调: // cbBysink.cpp : Defines the entry point for the ...

  5. cant found Microsoft.VSSDK.BuildTools.15.0.26201

    如果在vs扩展开发中出现 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 Failed to load 'C:\程序\EncodingNormalior\packages\Microsoft. ...

  6. Cordova - 安装camera插件之后编译错误解决方法！

    安装camera插件之后,编译出错,错误截图如下: 刚开始以为是AAPT编译导致的,尝试关闭AAPT编译选项,但是不行,认真看了一下编译出错信息,应该是缺少文件导致的,随后在对应的目录中加入了缺失的文 ...

  7. 【详细】Android入门到放弃篇-YES OR NO-》各种UI组件，布局管理器，单元Activity

    问:达叔,你放弃了吗? 答:不,放弃是不可能的,丢了Android,你会心疼吗?如果别人把你丢掉,你是痛苦呢?还是痛苦呢?~ 引导语 有人说,爱上一个人是痛苦的,有人说,喜欢一个人是幸福的. 人与人之 ...

  8. HttpRunnerManager接口测试平台部署在服务器上（Centos + python3.6 + Mysql5.7 + uwsgi + nginx）

    整个思路:HttpRunnerManager + python3.6 + Mysql5.7 + uwsgi + nginx 安装依赖环境,将源代码传到服务器,修改settings,增加uwsgi配置, ...

  9. 数组的三种声明方式总结、多维数组的遍历、Arrays类的常用方法总结

    1. 数组的三种声明方式 public class WhatEver { public static void main(String[] args) { //第一种 例: String[] test ...

  10. 源码调试debug_info 的作用和使用方法

    在他通过gcc来编译程序时,在map文件中,经常会遇到如下的情况: .debug_info 0x002191b6 0x1aa9 XXX .debug_info 0x0021ac5f 0xce4 XXX ...