Html5上传后有所见图片效果前端代码实现

<!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>
时间: 2024-08-28 10:57:50

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

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

1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewImage(file) { if (file.files && file.files[0]) { var img = document.getElementById('imghead'); var reader = new FileReader(); //读取file完成之后加载 reader.o

图片上传后及时预览

<!DOCTYPE html> <html> <head> <meta content="charset=utf-8" /> <!--设置图片上传后预览的div样式--> <style type="text/css"> *{ float:left; margin:0; } body>div{ width:200px; height:225px; text-align:center; } #

【Servlet】利用Servlet3.0标准与JSTL表达式实现文件上传系统,支持图片上传后显示

伴随着JDK1.6一起出现的Servlet3.0标准,使得JSP的文件上传系统不再艰难,此前在JSP的文件上传系统需要<[Jsp]使用jspsmartupload完成简单的文件上传系统>(点击打开链接)类似这样的插件才能完成的文件上传系统,还不支持中文,使得各位程序猿掏空心思才能解决这个问题.现在Servlet3.0对文件上传的方法进行封装,无须分块就可以实现.而且Servlet3.0还不用类似<[Servlet]最简单的Servlet JavaWeb程序>(点击打开链接)在web

图片上传后即时预览

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> //设置图片上传后预览的div样式 <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #

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

上传后,图片的顺序和预期的不一致,需要修改ueditor的源码. 一.找到editor/dialogs/attachment/attachment.js文件 1.将_this.fileList.push(json);修改为_this.fileList[$file.index()] = json; 2.考虑上传失败的情况,加上一个判断,避免在上传失败后,数组中出现undefined项 二.找到editor/dialogs/image/image.js文件 1.将_this.imageList.pu

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

1.上传后图片不显示,设置 允许 flash 2.保证php 执行是内存大小至少为为128M,多种方式设置,这里以init_set为例子,在index.php 加入下面一行代码,根据情况而定 ini_set('memory_limit','128M'); 原文地址:https://www.cnblogs.com/pa200318/p/10241850.html

经典的图片上传并绘制缩略图的类的代码

首先我们有3个文件 1个文件夹 images文件夹是默认存储图片地址 index.php是主页面 fileupload.class.php是图片上传类 ResizeImage.class.php是图片缩略图类 fileupload.class.php代码如下: <?php /** * file: fileupload.class.php 文件上传类FileUpload * 本类的实例对象用于处理上传文件,可以上传一个文件,也可同时处理多个文件上传 */ class FileUpload { pr

【转】asp.net(c#)使用HttpWebRequest附加携带请求参数以post方式模拟上传大文件(以图片为例)到Web服务器端

原文地址:http://docode.top/Article/Detail/10002 目录: 1.Http协议上传文件(以图片为例)请求报文体内容格式 2.完整版HttpWebRequest模拟上传文件请求报文内容封装 3.asp.net(c#)使用HttpWebRequest携带请求参数模拟上传文件封装源码下载 一.Http协议上传文件(以图片为例)请求报文体内容格式 首先,我们来看下通过浏览器上传文件的请求报文内容格式,这里以本人自己写的实例为例,如下图.除了能上传图片(即:头像字段),还

Discuz!NT Flash无法上传头像,点击上传后无任何反应

最近在对一个Discuz!NT论坛的老项目进行维护和二次开发,遇到了论坛无法上传头像的问题.在网上找了相当多的资料,发现解决的方法基本是无效的.虽然有的状况一样,但是没有解决方法,后来自己研究了下也总算是解决了这个问题. 首先说明下出现无法上传头像的具体症状,大概的症状有下面这几点: 使用Flash头像上传时,点击上传图片,然后显示“图片载入中,请稍后的提示信息”和上传进度的百分比,最后却是没有任何的反应. 网上有部分网友说到进度到10%就没有任何反应,其实只是部分情况,如果传大图片的话会显示其