jquery完成图片上传前本地预览功用,小程序中上传图片并展开压缩

By admin in 4858美高梅 on 2019年4月2日

小程序上传图片要先掌握她里头的逐条属性值,在

jquery实现图片上传前本地预览成效,jquery图片上传

本文实例为我们大快朵颐了jquery完毕图片上传前预览的现实代码,供大家参考,具体内容如下
介绍在此以前有3个小标题,一贯找不到图片预览时,图片不出去的来由,原来在于图片的门道!!!一向写的是图形的地点路径,未有怎么用。直接上代码。

html部分:

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

input:file事件是上传类型
4858美高梅 ,较常用的属性值如下:
accept:意味着能够采纳的文件MIME类型,三个MIME类型用英文逗号分开,常用的MIME类型见下表。
若要支持全数图片格式,则写 * 即可。
multiple:是或不是能够挑选多少个文件,几个文件时其value值为率先个文本的虚拟路径

jquery完成图片上传前本地预览功用,小程序中上传图片并展开压缩。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 ;
 }

运营结果如下:

4858美高梅 1

上述正是本文的全体内容,希望对我们学习jquery程序有所帮忙。

本文实例为大家享受了jquery完成图片上传前预览的求实代码,供我们参考,具体内容如下…

本文实例为我们享受了jquery实现图片上传前预览的切实可行代码,供我们参考,具体内容如下
介绍在此之前有三个小标题,一向找不到图片预览时,图片不出去的缘由,原来在于图片的途径!!!向来写的是图片的本土路径,未有啥样用。直接上代码。

要落到实处际效果益,上传图片时得以预览,因还有其余文字,所以并不只上传图片,落成与其他文字一起保存,当然上来先上传图片,然后把路子和别的文字一起写入数据库;同时为 图片生成缩略图,现只写上传图片方法,文字在ajax里一直传参数就能够了,若要上传多图,修改一下就足以了。

前几天在那里关键来讲下什么样去上传图片并拓展削减,领悟下以下属性值

html部分:

以史为鉴了网上资料,自身写了壹晃,并不要求再新加页面,只在3个页面里就OK啦。

4858美高梅 2

复制代码 代码如下:

JS代码:

 

<img id=”pic” src=”” >
<input id=”upload” name=”file” accept=”image/*” type=”file”
style=”display: none”/>

//ajax保存数据,后台方法里实现此方法 
function SaveData() {  
    filename = document.getElementById("idFile").value; 
    result =test_test_aspx.SaveData(filename).value; 
    if (result) { 
      alert("保存成功!");      
    } 
    return false; 
  }  
//实现预览功能 
  function DrawImage(ImgD) { 
    var preW = 118; 
    var preH = 118; 
    var image = new Image(); 
    image.src = ImgD.src; 
    if (image.width > 0 && image.height > 0) { 
      flag = true; 
      if (image.width / image.height >= preW/ preH) { 
        if (image.width > preW) { 
          ImgD.width = preW; 
          ImgD.height = (image.height * preW) / image.width; 
        } 
        else { 
          ImgD.width = image.width; 
          ImgD.height = image.height; 
        } 
        ImgD.alt = image.width + "x" + image.height; 
      } 
      else { 
        if (image.height > preH) { 
          ImgD.height = preH; 
          ImgD.width = (image.width * preH) / image.height; 
        } 
        else { 
          ImgD.width = image.width; 
          ImgD.height = image.height; 
        } 
        ImgD.alt = image.width + "x" + image.height; 
      } 
    } 
  } 
//当idFile内容改变时 
  function FileChange(Value) { 
    flag = false; 
    document.getElementById("showImg").style.display = "none";    
    document.getElementById("idImg").width = 10; 
    document.getElementById("idImg").height = 10; 
    document.getElementById("idImg").alt = ""; 
    document.getElementById("idImg").src = Value; 
  } 

先来看下页面呈现(点击上传图片,从相册中选用,上传完图片后又点了2次上传)

input:file事件是上传类型
较常用的属性值如下:
accept:代表能够选取的文件MIME类型,三个MIME类型用英文逗号分开,常用的MIME类型见下表。
若要补助具备图片格式,则写 * 即可。
multiple:是否能够挑选两个文件,多个文本时其value值为第贰个文件的虚构路径

以下为前台代码:

4858美高梅 3

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

<div class="cbs"> 
<div class="l"><label>图片:</label></div> 
<div> 
  <input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" /> 
</div> 
    </div>  
    <div class="cbs"> 
<div class="l"><label>预览:</label></div> 
<div> 
  <img id="idImg" height="0" width="0" src="" alt="4858美高梅 4" onload="DrawImage(this);" /> //实现预览 
  <img id="showImg" width="118" height="118" alt="4858美高梅 5" runat="server" style="display:none"/>  //加这个主要是为了实现查看时显示图片,因为上面的(idImg)加上runat="server" 报错,如有好的方法可以留言     
</div> 
</div>    

来来来,上代码

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

以下为AJAX方法:

wxml代码

 #pic{
 width:100px;
 height:100px;
 border-radius:50% ;
 margin:20px auto;
 cursor: pointer;
 }
[Ajax.AjaxMethod()] 
public bool SaveData(string fileNamePath) 
{ 
  string serverFileName = ""; 
  string sThumbFile = "";   
  string sSavePath = "~/Files/"; 
  int intThumbWidth = 118; 
  int intThumbHeight = 118; 
  string sThumbExtension = "thumb_"; 
  try 
  { 
 //获取要保存的文件信息 
 FileInfo file = new FileInfo(fileNamePath); 
 //获得文件扩展名 
 string fileNameExt = file.Extension; 

 //验证合法的文件 
 if (CheckFileExt(fileNameExt)) 
 { 
   //生成将要保存的随机文件名 
   string fileName = GetFileName() + fileNameExt; 
   //检查保存的路径 是否有/结尾 
   if (sSavePath.EndsWith("/") == false) sSavePath = sSavePath + "/"; 

   //按日期归类保存 
   string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/"; 
   if (true) 
   { 
 sSavePath += datePath; 
   } 
   //获得要保存的文件路径 
   serverFileName = sSavePath + fileName; 
   //物理完整路径 
   string toFileFullPath = HttpContext.Current.Server.MapPath(sSavePath); 

   //检查是否有该路径 没有就创建 
   if (!Directory.Exists(toFileFullPath)) 
   { 
 Directory.CreateDirectory(toFileFullPath); 
   } 

   //将要保存的完整文件名  
   string toFile = toFileFullPath + fileName; 

   ///创建WebClient实例 
   WebClient myWebClient = new WebClient(); 
   //设定windows网络安全认证  
   myWebClient.Credentials = CredentialCache.DefaultCredentials; 

   //要上传的文件 
   FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read); 
   //FileStream fs = OpenFile(); 
   BinaryReader r = new BinaryReader(fs); 
   //使用UploadFile方法可以用下面的格式 
   //myWebClient.UploadFile(toFile, "PUT",fileNamePath); 
   byte[] postArray = r.ReadBytes((int)fs.Length); 
   Stream postStream = myWebClient.OpenWrite(toFile, "PUT"); 
   if (postStream.CanWrite) 
   { 
 postStream.Write(postArray, 0, postArray.Length); 
   } 
   postStream.Close(); 
   //以上为原图 
   try 
   { 
 //原图加载  
  using (System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath(serverFileName))) 
 { 
   //原图宽度和高度  
   int width = sourceImage.Width; 
   int height = sourceImage.Height; 
   int smallWidth; 
   int smallHeight; 

   //获取第一张绘制图的大小,(比较 原图的宽/缩略图的宽 和 原图的高/缩略图的高)  
   if (((decimal)width) / height <= ((decimal)intThumbWidth) / intThumbHeight) 
   { 
  smallWidth = intThumbWidth; 
  smallHeight = intThumbWidth * height / width; 
   } 
   else 
   { 
  smallWidth = intThumbHeight * width / height; 
  smallHeight = intThumbHeight; 
   } 

   //判断缩略图在当前文件夹下是否同名称文件存在  
  int file_append = 0; 
   sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + fileNameExt; 

   while (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sThumbFile))) 
   { 
  file_append++; 
  sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + 
file_append.ToString() + fileNameExt; 
   } 
   //缩略图保存的绝对路径  
   string smallImagePath = System.Web.HttpContext.Current.Server.MapPath(sSavePath) + sThumbFile; 

   //新建一个图板,以最小等比例压缩大小绘制原图  
   using (System.Drawing.Image bitmap = new System.Drawing.Bitmap(smallWidth, smallHeight)) 
   { 
  //绘制中间图  
  using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap)) 
  { 
//高清,平滑  
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; 
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; 
g.Clear(Color.Black); 
g.DrawImage( 
sourceImage, 
new System.Drawing.Rectangle(0, 0, smallWidth, smallHeight), 
new System.Drawing.Rectangle(0, 0, width, height), 
System.Drawing.GraphicsUnit.Pixel 
); 
  } 
  //新建一个图板,以缩略图大小绘制中间图  
  using (System.Drawing.Image bitmap1 = new System.Drawing.Bitmap(intThumbWidth, intThumbHeight)) 
  { 
//绘制缩略图  
using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap1)) 
{   
//高清,平滑  
  g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; 
  g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; 
  g.Clear(Color.Black); 
  int lwidth = (smallWidth - intThumbWidth) / 2; 
  int bheight = (smallHeight - intThumbHeight) / 2; 
  g.DrawImage(bitmap, new Rectangle(0, 0, intThumbWidth, intThumbHeight), lwidth, bheight, intThumbWidth,intThumbHeight, GraphicsUnit.Pixel); 
  g.Dispose(); 
  bitmap1.Save(smallImagePath, System.Drawing.Imaging.ImageFormat.Jpeg); 
   return true; 
   } 
  } 
   } 
 } 
   } 
   catch 
   { 
 //出错则删除  
 System.IO.File.Delete(System.Web.HttpContext.Current.Server.MapPath(serverFileName)); 
 return false; 
   } 

 } 
 else 
 { 
   return false; 
 } 
  } 
  catch (Exception e) 
  { 
 return false; 
  } 
} 
/// <summary> 
/// 检查是否为合法的上传文件 
/// </summary> 
/// <param name="_fileExt"></param> 
/// <returns></returns> 
private bool CheckFileExt(string _fileExt) 
{ 
  string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" }; 
  for (int i = 0; i < allowExt.Length; i++) 
  { 
 if (allowExt[i] == _fileExt) { return true; } 
  } 
  return false; 

} 
   //生成随机数文件名 
public static string GetFileName() 
{ 
  Random rd = new Random(); 
  StringBuilder serial = new StringBuilder(); 
  serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff")); 
  serial.Append(rd.Next(0, 999999).ToString()); 
  return serial.ToString(); 

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

jQuery部分:

如上便是作者为大家带来的AJAX完毕图片预览与上传及变化缩略图的方法的全体内容了,希望对我们具有帮忙,多多辅助脚本之家~

自然最根本的恐怕js代码咯

 $(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 ;
 }

你或然感兴趣的稿子:

  • jQuery AjaxUpload
    上传图片代码
  • php+ajax无刷新上传图片实例代码
  • swfupload
    ajax无刷新上传图片实例代码
  • jquery的ajaxSubmit()异步上传图片并保留表单数据演示代码
  • JQuery+ajax落成批量上传图片(自写)
  • Jquery
    ajaxsubmit上传图片完结代码
  • Ajax
    上传图片并预览的简便实现
  • 根据HTML5的可预览多图片Ajax上传
  • 用ajax实现预览链接能够见见链接的始末
  • Ajax上传图片及上传前先预览功用实例代码
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//这里是选取的图片的地址数组
    });
  },

运营结果如下:

 

4858美高梅 6

自家的私有知道是如此的,但或者会有个别小错误,仅供我们借鉴,不适用于间接带走使用,当然把图纸上盛传画布上,并收获到图的地方,那里是不曾难点的,恐怕最终的保留,最广大借鉴下别的,请大神斧正

更加多精粹内容,请点击《jQuery上传操作汇总》,《ajax上传技术汇总》展开深刻学习和切磋。

4858美高梅 7

上述就是本文的全体内容,希望对我们学习jquery程序有所扶助。

 

您可能感兴趣的文章:

  • 基于jquery达成的上传图片及图片大小验证、图片预览效果代码
  • jQuery插件jcrop+Fileapi完美兑现图片上传+裁剪+预览的代码分享
  • 依照jquery完成图片上传本地预览作用
  • jquery落成包容浏览器的图纸上传本地预览成效
  • jQuery完成图片放大预览达成原理及代码
  • 依照JQuery完成图片上传预览与删除操作
  • jQuery+HTML5落到实处图片上传前预览效果
  • jQuery点击头像上传并预览图片
  • jquery达成图片上传从前预览的措施
  • jQuery达成鼠标经过图片预览大图效果
  • 简单来说完毕jQuery上传图片突显预览作用
  • jQuery完毕图片上传预览效果成效壹体化实例【测试可用】

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有