您的位置:时时app平台注册网站 > web前端 > 小程序中上传图片并开展减少

小程序中上传图片并开展减少

2019-11-03 09:33

 

jquery达成图片上传前本地预览功效,jquery图片上传

正文实例为大家大饱眼福了jquery实现图片上传前预览的现实性代码,供我们参照他事他说加以考查,具体内容如下
介绍在此以前有三个小标题,平素找不到图片预览时,图片不出去的通首至尾的经过,原本在于图片的途径!!!一直写的是图形之处路线,未有怎么用。直接上代码。

html部分:

复制代码 代码如下:<img id="pic" src="" >
<input id="upload" name="file" accept="image/*" type="file" style="display: none"/>

input:file事件是上传类型
较常用的属性值如下:
accept:表示可以选取的文本MIME类型,几个MIME类型用菲律宾语逗号分开,常用的MIME类型见下表。
若要扶助具备图片格式,则写 * 即可。
multiple:是或不是足以选拔三个公文,多少个文件时其value值为率先个文件的虚构路径

input:file的样式是不改变的,所以若要校正它的体制,首先将它隐蔽。display:none;

CSS部分: 因为做的是二个圆形的头像,所以对图片样式先举行定义。

 #pic{
      width:100px;
      height:100px;
      border-radius:50% ;
      margin:20px auto;
      cursor: pointer;
    }

jQuery部分:

 $(function() {
   $("#pic").click(function () {
     $("#upload").click();               //隐藏了input:file样式后,点击头像就可以本地上传
      $("#upload").on("change",function(){
        var objUrl = getObjectURL(this.files[0]) ;  //获取图片的路径,该路径不是图片在本地的路径
        if (objUrl) {
          $("#pic").attr("src", objUrl) ;      //将图片路径存入src中,显示出图片
        }
     });
   });
 });

 //建立一個可存取到該file的url
 function 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 ;
 }

运维结果如下:

图片 1

以上便是本文的全体内容,希望对大家学习jquery程序有所帮助。

本文实例为大家大饱眼福了jquery落成图片上传前预览的求实代码,供大家参谋,具体内容如下...

 

图片 2

var app = getApp()
Page({
  data: {
    logo: null,
   pics:[]

  },
 chooseImageTap: function () {
    let _this = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],//下面显示的数组是拍照还是别的
      itemColor: "#f7982a",//显示文字的颜色
      success: function (res) {
        if (!res.cancel) {//选中判断
          if (res.tapIndex == 0) {
            _this.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            _this.chooseWxImage('camera')
          }
        }
      }
    })

  },
 // 绘制图片到canvas上
  chooseWxImage: function (type) {
   const ctx = wx.createCanvasContext('myCanvas')//画布
    var that = this;
    wx.chooseImage({//上传图片事件
      count: 9,//数量
      sizeType: ['original', 'compressed'],//original 原图,compressed 压缩图,默认二者都有
      sourceType: ['album', 'camera'], //album 从相册选图,camera 使用相机,默认二者都有
      success: function (res) {
        console.log(res)
        ctx.drawImage(res.tempFilePaths[0], 0, 0, 100, 100)//成功选定第一张。后面的四个值分别是left,top,width,height,来控制画布上的图片的位置和大小
        ctx.draw()
      }
    })
    },
saveImage: function () {//这里触发图片上传的方法
    var pics = this.data.pics;
    app.uploadimg({
      url: 'https://........',//这里是你图片上传的接口
      path: pics//这里是选取的图片的地址数组
    });
  },

wxml代码

来来来,上代码

先来看下页面显示(点击上传图片,从相册中选择,上传完图片后又点了一回上传卡塔 尔(阿拉伯语:قطر‎

<button bindtap='chooseImageTap'>上传图片</button>
<button bindtap='saveImage'>保存</button>
<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>

前天在这里间根本来说下什么样去上传图片并张开压缩,精晓下以下属性值

 

小程序上传图片要先明白她里头的顺序属性值,在

本身的个人驾驭是那般的,但只怕会有个别小错误,仅供我们殷鉴不远,不适用于直接带入使用,当然把图片上传出画布上,并拿走到图之处,这里是从未难题的,大概最终的保存,最广大借鉴下别的,请大神斧正

图片 3

图片 4

自然最要紧的也许js代码咯

本文由时时app平台注册网站发布于web前端,转载请注明出处:小程序中上传图片并开展减少

关键词: