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. Python中的高性能容器--collections

    集合模块 相对于 Python 中内置的称为链表.集合.字典和元组的默认容器类型来说,集合模块( collection module )提供了高性能的备选方案( alternative ). 简单地看 ...

  2. 【leetcode-62，63，64 动态规划】 不同路径，最小路径和

    给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [   [1,3,1], [1,5,1] ...

  3. elasticsearch内存不断增长问题

    经过一段时间运行,es的索引已经达到数十G以上.es采用mmap的方式将索引文件映射到内存中,随着检索的次数增加,越来越多的数据被操作系统读入到内存中.这部分内存位于系统中,但是又不归es管理,也就是 ...

  4. oracle查询包含在子表中的主表数据

    Oracle数据库,查询某表中包含在子表中的数据,子表中数据按特定条件来源于该父表,SQL命令如 ) a_table父表,b_table子表,a和b表都有commandId列,a表的commandId ...

  5. jedis异常：Could not get a resource from the pool

    前几天公司后端系统出现了故障,导致app多个功能无法使用,查看日志,发现日志出现较多的redis.clients.jedis.exceptions.JedisConnectionException: ...

  6. 微信小程序文档

    提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', dur ...

  7. 全网独发gensim中similarities.Similarity用法

    index = similarities.MatrixSimilarity(lsi[corpus]) # 管网的原文翻译如下: 警告:similarities.MatrixSimilarity类仅仅适 ...

  8. TCP三次握手四次挥手介绍

    学过计算机网络的同学都知道TCP协议是计算机网络课程里面最复杂的协议之一,还没有通信就要搞个什么三次握手,断开还要什么四次分手,中间还要什么流量控制啦,拥塞控制,滑动窗口什么的,初学者看了就会头晕. ...

  9. jmeter学习笔记（二十二）——监听器插件之jp@gc系列

    一.jp@gc - Actiive Threads Over Time 不同时间活动用户数量展示 下面是一个阶梯加压测试的图标   二.jp@gc - Transactions per Second ...

  10. Java开发环境之ActiveMQ

    查看更多Java开发环境配置,请点击<Java开发环境配置大全> 柒章:ActiveMQ安装教程 1)去官网下载ActiveMQ安装包 http://activemq.apache.org ...