H5上传图片

最新推荐文章于 2024-06-29 16:04:34 发布
最新推荐文章于 2024-06-29 16:04:34 发布
阅读量189 收藏
点赞数
文章标签： H5 文件上传 移动端上传文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43504966/article/details/86491666
版权

关于手机端上传图片找了许久没有心仪的插件决定自已写一个简单的上传图片插件
页面描述:
1.上传图片到后台
2.图片、大小、文件数、格式判断
3.上传后显示图片，预览图片，移除图片

用到的JS是 Jquery，mui.js，mui.css，zoom.js，preimg.js 如果百度找不到js的，可以回复我，当然还有阿里图标，阿里图标自行解决。

  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./node_modules/mui/css/mui.min.css">
  <link rel="stylesheet" href="./node_modules/fonts/iconfont.css">
</head>
<style>
  .box {
      /* 有间隙的问题 */
      font-size: 0px; 
      margin-top: 30px;
    }

    .input {
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    
    .i {
      position: relative;
      width: 120px;
      height: 120px;
      border: 1px solid #cccccc;
      font-size: 100px;
      text-align: center;
      line-height: 100px;
      display: inline-block;
      vertical-align:bottom;
      margin-right:5px;
      margin-bottom:5px;
    }

    #img {
      display: inline-block;
      width: 120px;
      height: 120px;
      border: 1px solid sandybrown;
      margin: 10px;
    }

    .placeholder {
      width: 120px;
      height: 120px;
      border: 1px solid #cccccc;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      margin-right:15px;
      margin-bottom:5px;
      position: relative;
    }
    
    .placeholder > i {
      position: absolute;
      left: 50%;
      top: 30%;
      margin-left: -12px;
    }

     .placeholder > p {
      position: absolute;
      left: 50%;
      top: 65%;
      transform: translate(-50%, -50%);
      color: #000;
     }
 
    .uploadImg {
      width: 100%;
      height: 100%;
    }

    .closeImg {
      width: 20px;
      height: 20px;
      background-color: red;
      text-align: center;
      line-height: 30px;
      color: #fff;
      font-weight: 500;
      border-radius: 50%;
      position: absolute;
      top: -10px;
      right: -10px;
    }

    .closeImg i {
      width: 100%;
      height: 100%;
      font-weight: 700;
      text-align: center;
      font-size: 20px;
    }

    .errorImg {
      width: 100%;
      height: 20px;
      color: #fff;
      background-color: #ff3c3c;
      font-size: 12px;
      line-height: 20px;
      position: absolute;
      top: 0px;
      left: 0px;
    }

    .mui-preview-image.mui-fullscreen {
    position: fixed;
    z-index: 20;
    background-color: #000;
}
.mui-preview-header,
.mui-preview-footer {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 10;
}
.mui-preview-header {
    height: 44px;
    top: 0;
}
.mui-preview-footer {
    height: 50px;
    bottom: 0px;
}
.mui-preview-header .mui-preview-indicator {
    margin: 0 auto;
    display: block;
    line-height: 25px;
    color: #fff;
    text-align: center;
    margin: 15px auto 4;
    width: 70px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    font-size: 16px;
}
.mui-preview-image {
    display: none;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.mui-preview-image.mui-preview-in {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.mui-preview-image.mui-preview-out {
    background: none;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
.mui-preview-image.mui-preview-out .mui-preview-header,
.mui-preview-image.mui-preview-out .mui-preview-footer {
    display: none;
}
.mui-zoom-scroller {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}
.mui-zoom {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.mui-slider .mui-slider-group .mui-slider-item img {
    width: auto;
    height: auto;
    width: 100%;
    height: 100%;
}
.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
    width: 100%;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
    display: inline-table;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
    display: table-cell;
    vertical-align: middle;
}
.mui-preview-loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}
.mui-preview-loading.mui-active {
    display: block;
}
.mui-preview-loading .mui-spinner-white {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    height: 50px;
    width: 50px;
}
.mui-preview-image img.mui-transitioning {
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.placeholder .successImgIcon {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #85CE61;
  margin: 0px;
}

.placeholder .errorImgIcon {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #000;
  font-weight: 700;
  margin: 0px;
}

.mui-toast-message {
  font-size: 13px;
}
  </style>

<body>

  <div class="box">
    <i class="mui-icon mui-icon-plusempty i"><input class="input" type="file" name="myfile" id="fileId"></i>
  </div>

  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/mui/js/mui.js"></script>
  <script src="./node_modules/mui/js/zoom.js"></script>
  <script src="./node_modules/mui/js/preImg.js"></script>
  <script>
    $(function () {
      mui.previewImage();
      var disUploadNum = 1
      $('.input').change(function (e) {
        // 限制用户前一张图片还没有上传完，又要上传第二张图片的问题
        if( disUploadNum === 0 ) {
          mui.toast('亲，请等待图片上传结果', {
            duration: 'long',
            type: 'div'
          })
          return false
        }
        disUploadNum = 0;
        var fileIn = e.target.files[0];
        var file = $('#fileId').val();
        var _input = $('#fileId');
        var fileNameArr = $('#fileId').val().split('\\')
        var fileSize = document.getElementById('fileId').files[0].size
        var fileName = fileNameArr[fileNameArr.length - 1]
        var formatStr = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)
        if (formatStr !== 'png' && formatStr !== 'gif' && formatStr !== 'jpeg' && formatStr !== 'jpg') {
          mui.toast('亲，上传文件的格式不正确', {
            duration: 'long',
            type: 'div'
          })
          disUploadNum = 1;
          return false
        }
        if (fileSize > 2000000) {
          mui.toast('亲，文件太大啦，请上传小于2M的图片', {
            duration: 'long',
            type: 'div'
          })
          disUploadNum = 1;
          return false
        }
        console.log($('.placeholder').length);
        if ($('.placeholder').length >= 3) {
          mui.toast('亲，最多上传3张文件', {
            duration: 'long',
            type: 'div'
          })
          disUploadNum = 1;
          return false
        }
        $('<div class="placeholder"><i class="mui-spinner mui-spinner"></i><p>上传中..</p></div>').prependTo($(
          ".box"))
        setTimeout(() => {
          var reader = new FileReader();
          reader.readAsDataURL(fileIn);
          reader.onload = function (e) {
            $('<img class="uploadImg"  src=' + e.target.result +
              '>').prependTo($('.placeholder')[
              0])
            $('.placeholder').eq(0).find('.uploadImg').css({
              'opacity': '0.2'
            });
            setTimeout(() => {
              request()
            }, 500);
          }
          var formData = new FormData();
          formData.append("file", this.files[0]);

          function request() {
            $.ajax({
              url: '地址',
              type: 'post',
              data: formData,
              datatype: 'JSON',
              processData: false,
              headers: {
               token: 123456
             }
              contentType: false,
              async: true,
              cache: false,
              success: function (data) {
                if (data.code === 200) {
                  _input.val('');
                  $('.placeholder').eq(0).find('i').removeClass('mui-spinner')
                  $('.placeholder').eq(0).find('i').addClass('iconfont icon-chenggong successImgIcon')
                  $('.placeholder').eq(0).find('p').remove()
                  setTimeout(() => {
                    $('.placeholder').eq(0).find('.successImgIcon').remove()
                    $('<div class="closeImg"><i class="mui-icon mui-icon-closeempty"></i></div>')
                      .prependTo(
                        $('.placeholder')[0])
                    $('.placeholder').eq(0).find('.uploadImg').attr({
                      'src': data.url,
                      'data-preview-src': '',
                      'data-preview-group': '2'
                    }).css({
                      'opacity': '1'
                    })
                    disUploadNum = 1
                  }, 500);
                  if ($('.placeholder').length >= 3) {
                    $('.i').fadeOut()
                  }
                }
                if (data.code === 500) {
                  _input.val('');
                  $('.placeholder').eq(0).find('i').removeClass('mui-spinner')
                  $('.placeholder').eq(0).find('i').addClass(
                    'iconfont icon-shangchuanshibai errorImgIcon')
                  $('.placeholder').eq(0).find('p').remove()
                  $('<div class="closeImg"><i class="mui-icon mui-icon-closeempty"></i></div>').prependTo(
                    $('.placeholder')[0])
                  $('<div class="errorImg">上传失败</div>').prependTo($('.placeholder')[0])
                  disUploadNum = 1
                  mui.toast('亲，上传错误，请重新上传', {
                    duration: 'long',
                    type: 'div'
                  })
                  return false
                }
              },
              error: function () {
                _input.val('');
                $('.placeholder').eq(0).find('i').removeClass('mui-spinner')
                $('.placeholder').eq(0).find('i').addClass(
                  'iconfont icon-shangchuanshibai errorImgIcon')
                $('.placeholder').eq(0).find('p').remove()
                $('<div class="closeImg"><i class="mui-icon mui-icon-closeempty"></i></div>').prependTo(
                  $('.placeholder')[0])
                $('<div class="errorImg">上传失败</div>').prependTo($('.placeholder')[0])
                disUploadNum = 1
                mui.toast('亲，上传错误，请检查您的网络是否连接', {
                  duration: 'long',
                  type: 'div'
                })
                return false
              }
            });
          }
        }, 0.00001);
      })

      $('.box').on('click', '.closeImg', function () {
        $(this).parent().remove()
        $('.i').fadeIn()
      })
    })
  </script>
</body>

</html>

最近写的插件可能有些功能没有考虑到的及时评论我，谢谢！

我只是一个孩子。。。
关注
H5 上传图片 拍照 压缩图片
11-18
在H5应用中，用户经常需要上传图片，无论是从相册选择还是直接...以上就是关于H5上传图片、拍照、压缩图片以及通过form data提交的相关知识点。在实际开发中，还需要考虑用户体验、错误处理以及性能优化等多个方面。
【H5】文件上传（ajax）
花北城的博客
07-04 2626
【移动设备】iData 50P 技术规格 本文链接：https://blog.csdn.net/youcheng_ge/article/details/130604517【H5】Promise的用法 本文链接：https://blog.csdn.net/youcheng_ge/article/details/131634038【H5】文件下载（javascript） 本文链接：https://blog.csdn.net/youcheng_ge/article/details/131539397【H5】文件上
WebService 大文件上传,断点续传分片
weixin_52050572的博客
05-07 1455
用户上传的文件比较大，有20G左右，直接用HTML传的话容易失败，服务器也容易出错，需要分片，分块，分割上传。百度WEBUPLOADER上传视频等大文件，WEBUPLOAD组件实现文件上传功能和下载功能，JS大文件切片上传，断点续传实现DEMO，前端上传大文件的解决方案，前端上传大文件处理（切片、断点续传），前端大文件上传优化方案——分片上传，vue大文件上传解决方案，vue大文件上传解决方案10G，vue大文件上传解决方案50G，vue大文件上传解决方案100G，html5如何实现大文件断点续传、秒传，
HTML5 文件上传的2种方式
最新发布
alisky119的博客
06-29 1850
百度WEBUPLOADER上传视频等大文件，WEBUPLOAD组件实现文件上传功能和下载功能，JS大文件切片上传，断点续传实现DEMO，前端上传大文件的解决方案，前端上传大文件处理（切片、断点续传），前端大文件上传优化方案——分片上传，vue大文件上传解决方案，vue大文件上传解决方案10G，vue大文件上传解决方案50G，vue大文件上传解决方案100G，html5如何实现大文件断点续传、秒传，id=e1f49f3e1d4742e19135e00bd41fa3de。
H5上传文件及FileReader的使用
zjj2010xueyou的博客
12-22 827
input.addEventListener('change', function () { // 通过change 事件监听表单是否有变化。const input = document.createElement('input') // 创建一个input。// input.hidden = 'hidden' // 将表单进行隐藏，hidden在手机端不起作用，pc端可以。input.multiple = 'multiple'//实现文件多选，单选可不写此属性。//下面是你自己的代码。
h5上传图片的两种方法
qq_32450471的博客
05-19 3947
上传方法1.ajax用formData对象上传 介绍一下formData：FormData对象把数据编译成键值对的形式，用XMLHttpRequest来发送数据。 注意: 1.要将编码方式(enctype属性) 设置成 multipart/form-data 2.不设置内容类型 (contentType: false) 3.不处理数据 (processData: false) html代码： <input accept="image/*" type="file" id="uploadI
H5上传图片文件
11-09
在现代Web开发中，HTML5（H5）已经成为构建交互式和富媒体网站的重要工具，其强大功能之一就是支持用户通过浏览器直接上传图片和其他文件。...H5上传图片的功能强大且灵活，为Web应用提供了丰富的用户体验。
H5上传图片并使用canvas制作海报.rar
07-12
首先，H5上传图片功能主要依赖于`<input type="file">`标签，它允许用户选择本地的图片文件。通过监听`change`事件，我们可以获取到用户选择的文件。在JavaScript中，可以使用`FileReader`对象读取选中的图片文件，...
H5图片上传
07-11
在现代Web应用中，H5图片上传功能是一个非常常见的需求，尤其在社交媒体、电商网站以及各种在线服务中。H5，即HTML5，是HTML语言的最新版本，它提供了更强大的网页交互能力和多媒体支持。本篇文章将深入探讨如何在H5...
图片上传加预览（H5）
03-16
图片上传加预览（H5）,PC移动都可用
H5移动端多图上传
07-31
代码直接从我自己项目复制下来的。手机端多图上传。拿来能直接用。什么BUG可以留言反馈。
uniapp在H5端实现PDF和视频的上传、预览、下载
xiaoququ的博客
11-27 3219
【代码】uniapp在H5端实现PDF和视频的上传、预览、下载。
H5 拖拽上传本地文件（原生实现）
weixin_44646763的博客
06-11 1007
H5 拖拽上传本地文件（原生实现），同时支持点击上传
uniapp开发H5，实现H5上传文件（PDF），并可以预览下载删除
JPQLGZPW的博客
02-29 2683
总共需要用到四个API，
h5 实现图片上传 案例
Missbelover的博客
07-05 4116
如何在h5 中实现图片上传 ？ （单图片上传） 先写一个按钮 ，通过点击按钮触发文件上传的onclick 事件 <div class="btn" onclick="takePhone()">请点击进行拍照</div> <input type="file" name="file" id="upload" capture="camera" onchange="uploadImg()" accept="image/*" value=
为什么h5上传服务器只显示图片,【Web前端问题】怎么把图片从前端上传到服务器？...
weixin_32666933的博客
08-06 316
遇到一个需求，就是需要把图片传给后台数据库，然后前端再读取数据库图片，有人说base64，请问一下base64是怎么上传的？前端把图片转为base64数据，传给后台，然后后台保存base64，之后前端读取的时候再解析base64？是这样理解的吗？还有其他方法吗？前端用的是react，后台是java回答：可以使用 FormData ，其属于 XHR Level 2 中内容。文件可以使用 input:...
H5视频上传与播放
coco723的博客
02-24 2273
看需求似乎很简单，再加上本身antd-design已经封装好的Upload组件，功能强大且丰富；但是具体需求场景中还是有不少交互细节，也花了一些时间调试，为以后碰到类似场景更快速高效实现，记录和分享出来。一般二进制处理，可以支持各类文件格式，本质视频也是文件的一种格式；这样就解决了，Modal弹窗承载视频播放，Modal弹窗的宽高与视频的宽高一致；（1）配置中支持上传视频、上传成功后封面缩略图展示，点击后自动播放视频；（1）实现代码如下：被注释掉的代码：交互效果，点击直接新开页。
h5页面上传文件及图片（vue）
Youxingfang的博客
10-18 2989
h5页面上传文件及图片 1、vant的uploader组件： 代码如下（示例）： <van-uploader accept="application/pdf,application/xlsx,application/doc,application/docx,image/*" v-model="fileList" :max-size="2000 * 1024" @oversize="onOversize" :max-count="5" :after-read="afterRead"
h5上传图片
05-31
你可以使用HTML5中的File API来实现图片上传功能。具体步骤如下： 1. 在HTML文件中，添加一个文件选择器input元素和一个用于提交表单的按钮。 ``` ()">上传 ``` 2. 使用JavaScript获取文件选择器中选择的文件。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值