原生js文件上传,input如何实现文件(图片)上传与预览_dearqz的博客-程序员ITS304_input上传文件

技术标签: 原生js  文件上传与下载  后台请求图片  js  文件上传  手动上传  jquery  

效果

上传与展示

说明

  • 首先文件上传得需要后台支持,我这里用的node写的后端服务,篇幅有限,这里就不贴后端代码了,有需要的留言联系

dom部分

  • 由于form表单自动关联input文件上传按钮,故点击上传文件按钮时会自动往 action 路径提交文件
	<h3>文件上传:</h3>
    选择一个文件上传: <br />
    <form action="http://localhost:8090/upToImg1" method="post" enctype="multipart/form-data" id="formData2">
        名字 <input type="text" name="name"></input>
        <br />
        描述 <input type="text" name="content"></input>
        <br />
        <input type="file" name="image" size="50" onchange="fileChange(this)" />
        <br />
        <input type="submit" value="上传文件" id="submitButton" />
    </form>
    <button id="mybutton">获取</button>
    <ul id="myul"></ul>

js部分

  • 如果需要手动点击按钮上传,只需对其进行点击事件并禁止默认行为即可
  • 我这里用 jquery 做的请求,如果项目需要,请求时 需要携带其它参数 ,比如像我上面的名字和描述数据,可以把需要传递的数据用input框传递进去
  • 如果想对文件做限制,可根据onchange事件处理,函数返回false或promise的reject失败,即会阻止submit提交
	var submitButton = document.getElementById('submitButton');
    var myul = document.getElementById('myul');
    var mybutton = document.getElementById('mybutton');
    submitButton.onclick = function (e) {
    
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        var formData = new FormData($("#formData2")[0]);
        $.ajax({
    
            url: 'http://localhost:8090/upToImg1',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
    
                console.log(returndata);
            },
            error: function (returndata) {
    
                console.log(returndata);
            }
        });
    }

    function fileChange(target) {
    
        var fileSize = 0;
        fileSize = target.files[0].size;
        var size = fileSize / 1024;
        if (size > 1000) {
    
            alert("附件不能大于1M");
            target.value = "";
            return false;   //阻止submit提交
        }
        var name = target.value;
        var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
        if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
    
            alert("请选择图片格式文件上传(jpg,png,gif,gif等)!");
            target.value = "";
            return false;   //阻止submit提交
        }
    }
    mybutton.onclick = function () {
    
        $.ajax({
    
            url: 'http://localhost:8090/upToImg1',
            type: 'get',
            success: function (returndata) {
    
                console.log(returndata);
                var str='';
                returndata.data.forEach(ele => {
    
                    str+=`<li><img src="http://localhost:8090/upload/${
      ele.src}" alt="${
      ele.content}">${
      ele.name}</li>`
                });
                $("#myul").append(str)
            },
            error: function (returndata) {
    
                console.log(returndata);
            }
        });
    }
  • 上传成功后对相应数据做需要操作即可,我这里上传成功后通过点击获取按钮得到上传文件的列表,并通过 字符串拼接 的方式动态添加图片到 ul

注意

由于图片是在服务端存储,返回的图片只是图片的文件名,要想通过 img 标签展示图片,需拼接正确路径以匹配到后端存储代码

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42204698/article/details/90716257

智能推荐

SQL server 学习记录(一)_Damon_Code的博客-程序员ITS304

1、创建表create table(id int,name char(10))2、删除表中数据:delete tablename;  直接删除 数据库 数据、结构、日志  drop database;  删除表 drop tablename3、把表数据插入到另一个表    3.1:如果要插入目标表不存在: select * into 目标表 from 表 where …    3....

FPGA的学习:PLL-IP核的调用_石小舟的博客-程序员ITS304

锁相环是最常用的IP核之一,其性能强大,可以对输入到FPGA的时钟信号进行任意分频、倍频、相位调整、占空比调整,从而输出一个期望时钟。其基本原理如下:

android openfire 和 xmpp_weixin_30876945的博客-程序员ITS304

关于xmpp协议可以参考:http://www.jabbercn.org什么是OpenFireOpenfire 采用Java开发,开源的实时协作(RTC)服务器基于XMPP(Jabber)协议。  您可以使用它轻易的构建高效率的即时通信服务器。Openfire安装和使用都非常简单,并利用Web进行管理。单台服务器可支持上万并发用户。由于是采用开放的XMPP协议,您可以使用各种支...

mysql的rowscn_Oracle ORA_ROWSCN_weixin_39559804的博客-程序员ITS304

今天看到一篇关于ORA_ROWSCN的文章,虽然简短,没有什么实例,但是已经把ORA_ROWSCN大概是怎么回事介绍清楚了。记录一下。=================================================================================默认的情况下,每个块中所有的记录的ORA_ROWSCN都是相同的,当块中任意一条记录发生改变的情况下,块...

Jenkins漏洞 && MySQL漏洞 && PHPadmin漏洞_CN_SHzhaoyujie的博客-程序员ITS304

文章目录Jenkins漏洞防护MySQL漏洞搭建CVE-2012-2122漏洞环境复现漏洞MySQL的弱密码破解NmapHydraMySQL注入利用sqlmap防护phpmyadmin漏洞通过general log获取webshell防护Jenkins漏洞Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作.JenkinsMiner加密货币挖矿软件攻...

使用nexus搭建一个docker私服_huan_1993的博客-程序员ITS304

使用nexus搭建docker私服一、需求:二、实现步骤1、编写`docker-compose`文件,实现`nexus`的部署2、修改/usr/lib/systemd/system/docker.service 配置文件3、访问 `nexus`创建一个 `docker`仓库&gt; docker仓库类型1、此处我们简单演示一个 `hosted` 类型的仓库a)、创建一个 Blob Stores,用...

随便推点

python 如果没有该key值置为空,SECRET_KEY设置不能为空||可在Settings.py中找到_研究所的鹏鹏博士的博客-程序员ITS304

I tried to find this bug, but don't know how to solve it.I kept getting error message "The SECRET_KEY setting must not be empty." when executing populate_rango.pyI have checked on settings.py and the ...

Linux命令详解:md5sum 命令_morgan363的博客-程序员ITS304_md5命令

md5sum命令采用MD5报文摘要算法(128位)计算和检查文件的校验和。MD5算法常常被用来验证网络文件传输的完整性,防止文件被人篡改。MD5全称是报文摘要算法(Message-Digest Algorithm 5),此算法对任意长度的信息逐位进行计算,产生一个二进制长度为128位(十六进制长度就是32位)的“指纹”(或称“报文摘要”),不同的文件产生相 同的报文摘要的可能性是非常非常之小的。

关于h5中的fetch方法解读(小结)_mengzhengjie的博客-程序员ITS304

https://www.jb51.net/html5/586989.htmlhttps://segmentfault.com/a/1190000011973904Fetch概念fetch身为H5中的一个新对象,他的诞生,是为了取代ajax的存在而出现,主要目的仅仅只是为了结合ServiceWorkers,来达到以下优化:优化离线体验 保持可扩展性当然如果ServiceWorke...

局域网QQ第三版(V1.4)_zhengxiuchen86的博客-程序员ITS304_qq局域网版

局域网QQ,无客户端和服务端之分,局域网的计算机运行本程序就可以互相看见,可以自由聊天和传文件。本版较之1.0版的改进之处: 使用数据结构类型传送数据; 增加传文件功能(有进度条);考

[20]python多线程模块thread与threading_周小董的博客-程序员ITS304_python thread和threading

Python通过两个标准库(thread, threading)提供了对多线程的支持thread模块import time import thread def runner(arg): for i in range(6): print str(i)+':'+arg time.sleep(1) #结束当前线程 ...

MediaExtractor/MediaCodec 把 mp3 转化 pcm ,解码 为类似麦克输入的 数据byte源文件_xiaoniu_my的博客-程序员ITS304

public boolean Start() { mExtractor = new MediaExtractor(); try { mExtractor.setDataSource(Environment.getExternalStorageDirectory() + &quot;/8000PCM16.mp3&quot;); mExtractor.selectTrac...

推荐文章

热门文章

相关标签