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的函数重名看其初始化方式
Mar 08 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
详解ES6中class的实现原理
Oct 03 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个人网站架设连环讲(一)
2006/10/09 PHP
php的正则处理函数总结分析
2008/06/20 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
多广告投放代码 推荐
2006/11/13 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
Koa项目搭建过程详细记录
2018/04/12 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python functools模块学习总结
2015/05/09 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Django数据库表反向生成实例解析
2018/02/06 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python用for循环求和的方法总结
2019/07/08 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
公司聘任书模板
2014/03/29 职场文书
元旦趣味活动方案
2014/08/22 职场文书
三峡大坝导游词
2015/01/31 职场文书
月考总结与反思
2015/10/22 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA