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. 函数this指向哪个对象？

    函数的this指向是根据函数调用时所处的执行环境来确定的. this指向对象的情况有四种: 1.使用new关键字时:this会绑定构造函数所创建的对象. function Foo(){ this.a ...

  2. php GD 和图像处理函数, 制作一张图片

    php GD 和图像处理函数, 制作一张图片 // GD 和图像处理函数 // https://www.php.net/manual/zh/ref.image.php // https://www.p ...

  3. 【翻译】REST framework JWT Auth(django rest framework-jwt)

    JWT认证的REST框架 原文链接 概述 这个包提供对Django REST framework的JSON Web Token 认证支持. 需要满足条件 Python (2.7, 3.3, 3.4, ...

  4. Actions require unique method/path combination for Swagger

    原文:Actions require unique method/path combination for Swagger services.AddSwaggerGen (c => { c.Re ...

  5. Mycat使用--分库分表和读写分离

    Mycat分库分表读写分离 1. 模拟多数据库节点 2. 配置文件 具体操作参看: https://blog.csdn.net/vbirdbest/article/details/83448757 写 ...

  6. python 代码中log表示含义

    log表示以e为底数的对数函数符号.其验证代码如下: a=np.log(np.e )print(a)print(np.e)

  7. ConnectionString属性(网速慢的情况下研究Connect Timeout)

    ConnectionString 类似于 OLE DB 连接字符串,但并不相同.与 OLE DB 或 ADO 不同,如果“Persist Security Info”值设置为 false(默认值),则 ...

  8. Ext下载文件

    项目中前台用的是Ext JS,要从数据库中查询数据并导出为Excel表格 对此研究了下,代码如下: 前台代码: /** * 进行下载文件(form方式) */ _downloadDraft:funct ...

  9. redux reducer笔记

    踩坑一,reducer过于抽象 reducer写得没那么抽象也不会有人怪你的.^_^ reducer其实只有一个,由不同的reducer composition出来的.所以, reducer的父作用域 ...

  10. Docker 基础篇 入门篇

    1.Docker入门 1.为什么要用docker? 相比于传统: 部署非常慢 成本非常高 资源浪费 难于迁移和扩展 可能会被限定硬件厂商 由于物理机的诸多问题,后来出现了虚拟机 一个物理机可以部署多个 ...