精华内容
下载资源
问答
  • h5上传图片

    2016-12-14 14:26:00
    1.如何在H5上传图片 使用FileReader 2.FileReader接口 传图片我们只用到readAsDataURL 3.FileReader接口事件 传图片我们只用到onload 4.如何使用FileReader <script type="text/javascript"> var ...

    1.如何在H5上传图片

    使用FileReader

    2.FileReader接口

    传图片我们只用到readAsDataURL

    3.FileReader接口事件

    传图片我们只用到onload

    4.如何使用FileReader

    <script type="text/javascript">
    var result=document.getElementById("result");
    var file=document.getElementById("file");
    
    //判断浏览器是否支持FileReader接口
    if(typeof FileReader == 'undefined'){
        result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";
        //使选择控件不可操作
        file.setAttribute("disabled","disabled");
    }
    
    function readAsDataURL(){
        //检验是否为图像文件
        var file = document.getElementById("file").files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("看清楚,这个需要图片!");
            return false;
        }
        var reader = new FileReader();
        //将文件以Data URL形式读入页面
        reader.readAsDataURL(file);
        reader.onload=function(e){
            var result=document.getElementById("result");
            //显示文件
            result.innerHTML='<img src="' + this.result +'" alt="" />';
        }
    }
    
    function readAsBinaryString(){
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        //将文件以二进制形式读入页面
        reader.readAsBinaryString(file);
        reader.onload=function(f){
            var result=document.getElementById("result");
            //显示文件
            result.innerHTML=this.result;
        }
    }
    
    function readAsText(){
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        //将文件以文本形式读入页面
        reader.readAsText(file);
        reader.onload=function(f){
            var result=document.getElementById("result");
            //显示文件
            result.innerHTML=this.result;
        }
    }
    </script>
    <p>
        <label>请选择一个文件:</label>
        <input type="file" id="file" />
        <input type="button" value="读取图像" onclick="readAsDataURL()" />
        <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
        <input type="button" value="读取文本文件" onclick="readAsText()" />
    </p>
    <div id="result" name="result"></div>

     

    参考资料:http://blog.csdn.net/zk437092645/article/details/8745647

    转载于:https://www.cnblogs.com/norm/p/6179171.html

    展开全文
  • H5上传图片

    2019-01-15 14:04:36
    关于手机端上传图片找了许久没有心仪的插件决定自已写一个简单的上传图片插件 页面描述: 1.上传图片到后台 2.图片、大小、文件数、格式判断 3.上传后显示图片,预览图片,移除图片 用到的JS是 Jquery,mui.js,mui....

    关于手机端上传图片找了许久没有心仪的插件决定自已写一个简单的上传图片插件
    页面描述:
    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 上传图片 拍照 压缩图片 上传 form file 表单提交,直接请求接口就可以了,下载了就能用,自己定义接口请求,实测绝对可用,不能用打我
  • H5上传图片上传

    千次阅读 2019-01-29 11:32:27
    H5上传图片评论上传预览展示(删除) 前端事件我碰见了最常见的评论上传(实现预览,上传,删除)功能,就整理了一下代码。弄了一个相对比较见简单的功能 。 本人小白一个 大神勿喷! (如有不对的地方挺指出)》》...

    H5上传图片


    前端事件我碰见了最常见的评论上传(实现预览,上传,删除)功能,就整理了一下代码。弄了一个相对比较见简单的功能 。

    <input type="file" accept="image/*" capture="camera" @change='changeimage($event)'>  //accept="image/*" capture="camera" 这两处是移动端唤起直接照相操作 (可忽略)
    

    新增操作(把获取的img路径存储起来) 再向服务器上传换取线上路径

    
          changeimage(event) { //新增操作
            var inmgbase64;
            this.getObjectURL(event.target.files[0]).then((res) => {
              inmgbase64 = res;
              let myformdata = new FormData()
              myformdata.set('data', inmgbase64); //看后太是否需要formdata
              //请求接口
            })
          },
          
          
          getObjectURL(file) {
            return new Promise((resolve) => {
              var reader = new FileReader();
              reader.readAsDataURL(file);
              reader.onload = function(e) {
                resolve(e.target.result);
              }
            });
          }
    
    
    

    效果图在这里插入图片描述

    展开全文
  • 本文给大家分享在使用angular上传图片的功能,在开发过程中遇到很多问题,最终都解决了,今天小编给大家介绍下Angular下H5上传图片的方法(可多张上传),非常不错,需要的朋友参考下
  • h5上传图片并用canvas制作海报,上传图片然后在图片上任意位置添加文字标签进行保存
  • h5上传图片及预览2016-04-220第一次做图片上传,记录一些问题。1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。而网页上的每一个图片,都是需要消耗一个http请求下载而来的...

    h5上传图片及预览

    2016-04-22

    0

    第一次做图片上传,记录一些问题。

    1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。而网页上的每一个图片,都是需要消耗一个http请求下载而来的,使用base64就不用请求http。

    2,上传图片:1

    3,图片转base64(readAsDataURL方法用于读取指定Blob或File的内容。当读操作完成,readyState变为DONE, loadend被触发,此时result属性包含数据:URL以base64编码的字符串表示文件的数据):1 function picUpload() { 2 var preview = document.querySelector('img'); 3 var file = document.querySelector('input[type=file]').files[0]; 4 var reader = new FileReader(); 5 reader.onloadend = function () { 6 preview.src = reader.result; 7 } 8 if (file) { 9 reader.readAsDataURL(file);10 } else {11 preview.src = "";12 }13 }

    4,压缩图片并转base64(通过canvas把图片进行大小压缩):1 function picUpload(){ 2 var me=this; 3 var img = new Image(); 4 $('#up').on('change',function(){ 5 var ViewWidth=$(this).width(); 6 var ViewHeight=$(this).height(); 7 var file = this.files[0]; 8 var URL = URL || webkitURL; 9 img.src='/images/loading.gif' data-original=URL.createObjectURL(file);10 img.onload = function(){11 var imgMe=this,12 imgWidth=0,13 imgHeight= 0,14 w = imgMe.width,15 h = imgMe.height,16 scale1 = w/ViewWidth,17 scale2 = h/ViewHeight;18 imgWidth=parseInt(Math.floor(w/scale1));19 imgHeight=parseInt(Math.floor(h/scale2));20 var canvas = document.createElement('canvas');21 var img = document.createElement('img');22 $('#ImgPr').html(img); 23 var ctx = canvas.getContext('2d');24 canvas.width = ViewWidth;25 canvas.height = ViewHeight;26 ctx.drawImage(imgMe,0,0,imgWidth,imgHeight);27 me.src='/images/loading.gif' data-original=canvas.toDataURL('image/jpeg');28 $(img).prop("src",me.src);29 };30 });31 };

    5,$.ajax()方法里的data如果是字符串则不能用大括号括起来,这样在有某些手机上会报错。

    0

    *特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。

    展开全文
  • H5上传图片文件

    2017-11-09 12:31:14
    简单介绍H5实现上传图片,文件等功能!简单有效,方便
  • H5上传图片并使用canvas制作海12报
  • mobile h5 上传图片

    2017-09-27 17:02:20
    源码是h5、css和js文件,服务器端接收文件网上搜索保存base64图片即可,可适用h5\pc端,上传完成缩略图在对应图片处预览,需要的下载,测试通过
  • H5上传图片之canvas

    2018-05-07 11:52:00
    H5上传图片之canvas,使用canvas处理压缩图片再上传 html代码: <form action="" method="post"> <dl> <dd> <div> <div id="img_wrap"> ...
  • webView支持H5上传图片

    千次阅读 2016-07-29 10:18:58
    安卓WebView支持兼容H5上传图片功能  最近用安卓原生与H5交互做的比较多,深有所感,随笔小记一下,这些都是自己在交互过程中遇到的问题及解决办法;  1.安卓响应H5的点击事件,我所用的有两种方式  (1)截取...
  • 移动端手机h5上传图片旋转90度

    千次阅读 2019-10-21 19:51:07
    移动端手机h5上传图片会旋转90度的问题 h5页面调用相机正常情况下都是正常的,但是有些手机横着照相的时候就会正常的,iphone正确的拍照方式是横屏的,而用户往往是竖屏拍照上传的,就相当于照相机反转了90度,当你横屏...
  • 移动端h5上传图片

    2021-03-11 15:25:05
    最近事比较少,封装一个h5的移动端上传文件组件,先看效果: HTML部分: <!-- 图片上传预览 --> <div class="imgList"> <!-- 身份证正面 --> <div class="imgList_item" @click="Upload(1...
  • 关于H5平台H5制作起来上手快、效果好,个人营销推广的佳品。兔展、易企秀、意派360等平台,大同小异,要做一个用户互动的H5...这个H5是让用户分享海报,以图片识别二维码的方式进入H5,用户第一步上传自己的图片、第...
  • 项目背景,h5独立的移动端和android内嵌套h5 h5上传方法: 页面中代码,注意要用multiple,这个点击事件不给h5使用 <form action="" method="post" id="uploadForm" enctype="multipart/form-data"> ...
  • H5上传图片压缩

    千次阅读 2018-11-09 14:13:31
    解决一些图片上传服务器转base64过大的问题用到技术canvas HTML代码 &lt;input id="file" type="file"&gt; js代码  &lt;script type="text/javascript"&gt;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,672
精华内容 668
关键字:

h5上传图片