javascript-js怎么获取file的值实现多图片预览呀

问题描述

js怎么获取file的值实现多图片预览呀

下面的是原来的代码，只能预览一张图片，现在我想预览多张图片，并且可以增加删除图片操作，求代码！！！

 <script>
        function Image() {
            var doc = document.getElementById("doc");
            var img = document.getElementById("preview");
            img.style.display = 'block';
            img.style.width = '400px';
            img.style.height = '200px';
            img.src = window.URL.createObjectURL(doc.files[0]);
        }
</script>
</head>
<body >
    <form id="form1" runat="server">
   <input type="file" name="doc" id="doc"  onchange="javascript:Image();">

<p>
<div><img id="preview" style="diplay:none" /></div>

解决方案

javascript客户端图片预览

解决方案二：

用flash或ajax先上传在预览或用H5的canvas

时间： 2024-11-01 12:59:36

javascript-js怎么获取file的值实现多图片预览呀的相关文章

js实现纯前端的图片预览_javascript技巧

图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 一.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取Bl

JS魔法堂之实战：纯前端的图片预览

一.前言图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的 onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 二.准备功夫1──FileReader FileReader是HTML

JavaScript File API实现文件上传预览_javascript技巧

一.概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽相

input file上传图片预览功能实例代码_javascript技巧

input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>

JS实现的图片预览插件与用法示例【不上传图片】_javascript技巧

本文实例讲述了JS实现不需要上传的图片预览插件与用法.分享给大家供大家参考,具体如下: 小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

如何通过js实现图片预览功能【附实例代码】_javascript技巧

实现代码: <!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.org/1999/xhtml"> <head> <meta http-equiv="Co

纯JS实现本地图片预览的方法_javascript技巧

本文实例讲述了纯JS实现本地图片预览的方法.分享给大家供大家参考.具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的.就拿自己以前写的写了一个.代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容.本机浏览器基本都支持(IE,FF,Chrome) index.html如下: <html> <head> <title>Test</title> <script type="text/javascript

js本地图片预览实现代码_javascript技巧

本文实例为大家分享了js本地图片预览实例,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="divPreview"> <img id="imgHeadPhoto" src="noperson.jpg" style="wid

多种方式实现js图片预览_javascript技巧

先贴代码,之后完善: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta n