H5的上传图片如何实现呢？

以下是我用vue实现的图片上传功能，仅供参考。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>任务系统</title>

    <script src="js/base.js"></script>

    <link rel="stylesheet" href="css/base.css">

    <link rel="stylesheet" href="css/inputImg.css">

    <link rel="shortcut icon" href="#" />

    <script src="js/jquery.min.js"></script>

    <script src="js/vue.js"></script>

    <script src="js/config.js"></script>

</head>

<body>

    <div id="app">

        <textarea class='pingjiaContent' @input="descInput" maxlength='200' placeholder="请描述任务完成情况及截图" name="" id=""

            cols="30" rows="4" v-model="desc">

        </textarea>

        <div class="imgBox">

            <div class="uploadBox" v-for="(value, key) in imgs">

                <img :src="getObjectURL(value)" alt="" class="uploadImg">

                <img src="data:images/close.png" alt="" class="closeImg" @click='delImg(key)'>

            </div>

            <div class="inputButton">

                <img src="data:images/add.png" alt="" class="addImg">

                <input type="file" class="upload" @change="addImg" ref="inputer" multiple

                    accept="image/png,image/jpeg,image/gif,image/jpg" />

            </div>

            <div class="submitTask" @click="submit">

                提交任务

            </div>

            <div class="back">

                返回

            </div>

        </div>

    </div>

    <script>

        new Vue({

            el: '#app',

            data: {

                formData: new FormData(),

                imgs: {},

                imgLen: 0,

                txtVal: 0,

                desc: "",

            },

            created() {

            },

            methods: {

                descInput() {

                    // this.txtVal = this.desc.length;

                },

                addImg(event) {

                    let inputDOM = this.$refs.inputer;

                    // 通过DOM取文件数据

                    this.fil = inputDOM.files;

                    console.log(inputDOM.files)

                    let oldLen = this.imgLen;

                    for (let i = 0; i < this.fil.length; i++) {

                        let size = Math.floor(this.fil[i].size / 1024);

                        if (size > 5 * 1024 * 1024) {

                            alert('请选择5M以内的图片！');

                            return false

                        }

                        this.imgLen++;

                        this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i]);

                        console.log(this.imgs);

                    }

                },

                getObjectURL(file) {

                    var url = null;

                    if (window.createObjectURL != undefined) { // basic

                        url = window.createObjectURL(file);

                    } else if (window.URL != undefined) { // mozilla(firefox)

                        url = window.URL.createObjectURL(file);

                    } else if (window.webkitURL != undefined) { // webkit or chrome

                        url = window.webkitURL.createObjectURL(file);

                    }

                    return url;

                },

                delImg(key) {

                    this.$delete(this.imgs, key);

                    this.imgLen--;

                },

                // 提交上传图片

                submit() {

                    console.log(this.imgs)

                    console.log(11)

                    for (let key in this.imgs) {

                        let name = key.split('?')[0];

                        console.log(this.imgs[key]);

                        this.formData.append(name, this.imgs[key]);

                    }

                    // $.ajax({

                    //     url: '/material/uploadFile',

                    //     type: 'POST',

                    //     cache: false, //上传文件不需要缓存

                    //     data: this.formData,

                    //     processData: false, // 告诉jQuery不要去处理发送的数据

                    //     contentType: false, // 告诉jQuery不要去设置Content-Type请求头

                    //     success: function (data) {

                    //     },

                    //     error: function (data) {

                    //     }

                    // })

                },

            }

        });

    </script>

</body>

</html>
html,

body {

    width: 100%;

    height: 100%;

    font-family: "微软雅黑";

    background: #F8F8F8 !important;

}

#box {

    width: 100%;

    position: relative;

    height: 100%;

}

.pingjiaContent {

    width: 100%;

    border-radius: 0.1rem;

    /* border: 1px solid #CACACA; */

    padding: 0.2rem;

    box-sizing: border-box;

    outline: none;

    margin-bottom:;

    border: none;

    resize: none;

}

.uploadBox {

    width: 2rem;

    height: 2rem;

    position: relative;

    margin-right: 0.15rem;

    margin-bottom: 0.35rem;

}

.uploadImg {

    width: 100%;

    height: 100%;

    overflow: hidden;

}

.closeImg {

    width: 0.5rem;

    height: 0.5rem;

    position: absolute;

    top: 2%;

    right: 1%;

}

.inputButton {

    width: 2rem;

    height: 2rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border: 1px solid #cdcdcd;

    position: relative;

    margin-right: 0.15rem;

    margin-bottom: 0.35rem;

}

.addImg {

    width: 1.2rem;

    height: 1.2rem;

}

.upload {

    width: 100%;

    height: 100%;

    opacity:;

    position: absolute;

    top:;

    left:;

    z-index:;

}

.imgBox {

    width: 100%;

    background: #fff;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    padding-bottom: 0.5rem;

    box-sizing: border-box;

    padding: 0.5rem;

}

.submitTask {

    background: #EF504D;

    width: 100%;

    height: 0.8rem;

    color: #fff;

    font-size: 0.32rem;

    line-height: 0.8rem;

    text-align: center;

    border-radius: 0.1rem;

    margin-top: 0.8rem;

}

.back {

    background: #F7F7F7;

    width: 100%;

    height: 0.8rem;

    color: #4D4D4D;

    font-size: 0.32rem;

    line-height: 0.8rem;

    text-align: center;

    border-radius: 0.1rem;

    margin-top: 0.4rem;

    border: 1px solid #E0E0E0;

}

后台PHP只需要利用  获取到接收的文件即可实现上传。

H5 利用vue实现图片上传功能。的更多相关文章

  1. vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下:   <ul class="clearfix">   ...

  2. [Ting's笔记Day8]活用套件carrierwave gem:（3）Deploy图片上传功能到Heroku网站

    前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...

  3. 前端丨如何使用 tcb-js-sdk 实现图片上传功能

    前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...

  4. thinkphp达到UploadFile.class.php图片上传功能

    片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...

  5. Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  6. PHP语言学习之php做图片上传功能

    本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...

  7. 给DEDECMS广告管理中增加图片上传功能

    dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...

  8. [Ting's笔记Day6]活用套件carrierwave gem:（1）在Rails实现图片上传功能

    carrierwave是一款经典的图片上传套件,本篇的目标是先在本地端(development)的rails项目试成功gem. (预计中集的进度会练习怎么利用Amazone S3架设图片上传Host, ...

  9. JavaScript实现单张图片上传功能

    前台jsp代码 <%@ page language="java" pageEncoding="UTF-8" contentType="text/ ...

随机推荐

  1. IDEA远程调试Ambari Server

    1.配置端口 Ambari Server默认配置了服务端的debug参数,端口为5005.如果要修改端口,可以在/usr/sbin/ambari_server_main.py文件中对应地方修改,直接改 ...

  2. 【代码优化】C#遍历所有控件（Control方法）

    直接上代码: /// <summary> /// 判断价格是否可以购买技能的方法 /// </summary> /// <param name="btnBuyA ...

  3. Linux RedHat 7 配置本地 YUM源

    尽管RPM安装方法能够帮助用户查询软件相关的依赖关系,但是还是需要安装人员自己来解决,而且有些大型软件可能与数十个程序都有依赖关系,在这种情况下安装软件事件非常痛苦和耗费事件的事情,而Yum软件仓库可 ...

  4. webpack 打包器

    创建目录mkdir demo && cd demo 产生package.json执行 npm init -y 先全局安装webpack和webpack-clinpm install w ...

  5. Python进阶(一)----函数

    Python进阶(一)----函数初识 一丶函数的初识 什么函数: ​ 函数是以功能为导向.一个函数封装一个功能 函数的优点: ​ 1.减少代码的重复性, ​ 2.增强了代码的可读性 二丶函数的结构 ...

  6. 【高并发解决方案】8、Nginx/LVS/HAProxy负载均衡软件的优缺点详解

    PS:Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,参考了一些资料,结合自己的一些使用经验,总结一下. 一般对负载均衡的使用是随着网站规模的提升根据不 ...

  7. 为安卓项目添加FileProvider

    简单记录 android7.0开始出现FileProvider.从一个小白角度看需要注意这几点: Manifest.xml中添加provider节点 添加xml文件 模块的build.gradle中添 ...

  8. emqx配置ssl

    1.生产自签证书 mkdir /etc/emqttd/certs/ && cd /etc/emqttd/certs/ openssl genrsa -out ca-key.pem 20 ...

  9. 什么影响了mysql的性能-硬件资源及系统方面优化

    随着数据量的增大,数据库的性能问题也是个值得关注的问题,很多公司对mysql性能方面没有太过重视,导致服务浪费过多资源.mysql服务性能差从而直接影响用户体验,这里我们简单的先来聊聊什么影响了mys ...

  10. 【笔记】MAML-模型无关元学习算法

    目录 论文信息: Finn C, Abbeel P, Levine S. Model-agnostic meta-learning for fast adaptation of deep networ ...