uploader秒传图片到服务器完整代码


Posted in Javascript onApril 22, 2017

先看看效果图:

uploader秒传图片到服务器完整代码

uploader秒传图片到服务器完整代码

uploader秒传图片到服务器完整代码

页面中js部分

var f1 = null; 
var picarr = new Array(); 
var basearr = new Array(); 
var lat = "", 
  longt = ""; 
var files = []; 
// 上传文件 
function upload() { 
   
   
  var wt = plus.nativeUI.showWaiting(); 
  var task = plus.uploader.createUpload(server + "?action=dynamicadd", { 
      method: "POST" 
    }, 
    function(t, status) { //上传完成 
      if (status == 200) { 
//           console.log("上传成功:" + t.responseText); 
        mui.toast("发表成功"); 
        //插入本地数据库 
        wt.close(); 
        mui.back(); 
      } else { 
        console.log("上传失败:" + status); 
        wt.close(); 
      } 
    } 
  ); 
  var title = $("#tbxtitle").val(); 
  if (title.length < 1) { 
    wt.close(); 
    mui.toast("内容不能为空"); 
  } else {  
    task.addData("title", title); 
    task.addData("uid", getUid()); 
    task.addData("userid", plus.storage.getItem("policeid")); 
    //task.addData("lat", lat.toString()); 
    //task.addData("longt", longt.toString()); 
//       console.log("准备上传"+files.length+"个图片"); 
    for (var i = 0; i < files.length; i++) { 
      var f = files[i]; 
//         console.log("准备上传的图片路径:"+f.path); 
      task.addFile(f.path, { 
        key: f.name 
      }); 
    } 
    task.start(); 
  } 
   
} 
 
// 添加文件 
var index = 1; 
var newUrlAfterCompress; 
function appendFile(p) { 
  files.push({ 
    name: "uploadkey" + index,//这个值服务器会用到,作为file的key 
    path: p 
  }); 
  index++; 
} 
// 产生一个随机数 
function getUid() { 
  return Math.floor(Math.random() * 100000000 + 10000000).toString(); 
} 
 
function getposition() { 
  plus.geolocation.getCurrentPosition(function(p) { 
    var codns = p.coords; // 获取地理坐标信息; 
    lat = codns.latitude; //获取到当前位置的纬度; 
    longt = codns.longitude; //获取到当前位置的经度 
  }, function(e) { 
    //alert("获取百度定位位置信息失败:" + e.message); 
  }, { 
    provider: 'baidu' 
  }); 
} 
 
function galleryImgs() { // 从相册中选择图片 
  plus.gallery.pick(function(e) { 
    $(".dynamic_images ul li").remove(".pickimg"); 
//       console.log("选择了"+e.files.length+"个图片"); 
    for (var i = 0; i < e.files.length; i++) { 
      if (i < 9) { 
        picarr[i] = e.files[i]; 
        $(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + e.files[i] + "' /></li>"); 
        var dstname="_downloads/"+getUid()+".jpg";//设置压缩后图片的路径 
        newUrlAfterCompress=compressImage(e.files[i],dstname); 
        appendFile(dstname); 
        //console.log(e.files[i]); 
        //console.log(dstname); 
      } 
    } 
  }, function(e) { 
    console.log("取消选择图片"); 
  }, { 
    filter: "image", 
    multiple: true 
  }); 
} 
 
//压缩图片,这个比较变态的方法,无法return 
function compressImage(src,dstname) { 
  //var dstname="_downloads/"+getUid()+".jpg"; 
  plus.zip.compressImage({ 
      src: src, 
      dst: dstname, 
      overwrite:true, 
      quality: 20 
    }, 
    function(event) { 
      //console.log("Compress success:"+event.target); 
      return event.target; 
    }, 
    function(error) { 
      console.log(error); 
      return src; 
      //alert("Compress error!"); 
    }); 
   
} 
//旋转图片,本文没用到 
function rotateImage() { 
  plus.zip.compressImage({ 
      src: "_www/a.jpg", 
      dst: "_doc/a.jpg", 
      rotate: 90 // 旋转90度 
    }, 
    function() { 
      alert("Compress success!"); 
    }, 
    function(error) { 
      alert("Compress error!"); 
    }); 
} 
 
function showActionSheet() { 
  var bts = [{ 
    title: "拍照" 
  }, { 
    title: "从相册选择" 
  }]; 
  plus.nativeUI.actionSheet({ 
      cancel: "取消", 
      buttons: bts 
    }, 
    function(e) { 
      if (e.index == 1) { 
        getImage(); 
      } else if (e.index == 2) { 
        galleryImgs(); 
      } 
    } 
  ); 
} 
//拍照 
function getImage() { 
  var cmr = plus.camera.getCamera(); 
  cmr.captureImage(function(p) { 
    plus.io.resolveLocalFileSystemURL(p, function(entry) { 
      var localurl = entry.toLocalURL(); // 
      $(".dynamic_images ul li").remove(".pickimg"); 
      $(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + localurl + "' /></li>"); 
    }); 
  }); 
}

页面初始化的一些操作:

document.addEventListener("plusready", plusReady, false); 
 
function plusReady() { 
  document.getElementById("addnew").addEventListener("tap", function() { 
    showActionSheet();//拍照还是相册 
  }); 
  document.getElementById("fabiao").addEventListener("tap", function() { 
    upload();//上传文件 
  }); 
  plus.nativeUI.closeWaiting(); 
 
}

html布局,比较简单,模仿微信的:

<div class="dynamic_images"> 
  <ul> 
    <!--<li><img src="images/cbd.jpg"></li>--> 
    <li><img src="images/iconfont-tianjia.png" id="addnew"></li> 
    <!--<li><span class="mui-icon iconfont icon-jia2" style="font-size: 28px;"></span></li>--> 
 
  </ul> 
</div>

服务端asp.net版

string file = ""; 
int count = Request.Files.Count; 
 
for (int i = 0; i < count; i++) 
{ 
  int l = Request.Files["uploadkey" + (i + 1)].ContentLength; 
  byte[] buffer = new byte[l]; 
  Stream s = Request.Files["uploadkey" + (i + 1)].InputStream; 
  System.Drawing.Bitmap image = new System.Drawing.Bitmap(s); 
  string imgname = Common.GetGuid() + ".jpg"; 
  string path = "Images/" + DateTime.Now.ToString("yyyyMMdd") + "/"; 
  if (!Directory.Exists(HttpContext.Current.Server.MapPath(path))) 
  { 
    System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(path)); 
  } 
  image.Save(Server.MapPath(path + "/" + imgname)); 
}

速度非常快,测试过,如果不压缩速度没有明显的下降,但是考虑到显示时候加载的问题,还是进行了压缩。

后补的CSS,其实没什么样式的:

<style type="text/css"> 
  .dynamic_images { 
    width: 100%; 
  } 
   
  .dynamic_images ul { 
    margin: 0; 
    padding: 0; 
  } 
   
  .dynamic_images ul li { 
    float: left; 
    list-style: none; 
    width: 25%; 
  } 
   
  .dynamic_images ul li img { 
    width: 98%; 
    height: 80px; 
  } 
</style>

加号是字体:http://iconfont.cn/
头部样式是二次修改HB的样式,如果你不是用HB开发的话,自己写CSS就行了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中获取下个月一号,是星期几
Jun 01 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
Node.js中看JavaScript的引用
Apr 22 #Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 #Javascript
Ionic2调用本地SQlite实例
Apr 22 #Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 #Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 #Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 #Javascript
AngularJS的脏检查深入分析
Apr 22 #Javascript
You might like
PHP 快速排序算法详解
2014/11/10 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
实例讲解php实现多线程
2019/01/27 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
javascript页面加载完执行事件代码
2014/02/11 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
python实现BackPropagation算法
2017/12/14 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python和c语言的主要区别总结
2019/07/07 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python实现多进程通信实例分析
2019/09/01 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
详解Python中的路径问题
2020/09/02 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
土木工程应届生求职信
2013/10/31 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
效能风暴心得体会
2014/09/04 职场文书