uploader秒传图片到服务器完整代码
更新时间:2017年4月27日 10:00 点击:2584
先看看效果图:
页面中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就行了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
上一篇: JS实现异步上传压缩图片
下一篇: 源码分析Vue.js的监听实现教程
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 下面小编就为大家带来一篇JS实现图片的不间断连续滚动的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-06-12
- 在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕的方法汇总,需要的朋友参考下...2016-02-12
- 这篇文章主要为大家详细介绍了基于jquery实现图片放大功能的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 本文主要介绍了jQuery制作图片旋转效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-08
- 这篇文章主要为大家详细介绍了uploader秒传图片到服务器的完整代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-27
- 这篇文章主要以图文结合的方式详细介绍了本地Windows 78上IIS服务器搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 ...2017-07-06
- 这篇文章主要为大家详细介绍了php图片添加文字水印实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-03-17
- 本文主要介绍了js实现图片360度旋转的思路与方法。具有很好的参考价值,下面跟着小编一起来看下吧...2017-01-26
- 本文主要介绍了原生js实现图片放大缩小计时器效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了基于JavaScript实现图片点击弹出窗口而不是保存的相关资料,需要的朋友可以参考下...2016-02-12
- 这篇文章主要介绍了WordPress后台中实现图片上传功能的实例讲解,包括多个图片上传表单功能的实现,需要的朋友可以参考下...2016-01-14
- 你的网站是不是常常被黑,或者一不注意就成了黑客的“肉鸡”?对于Web网站服务器来说,如果不进行安全设置,很容易被黑客“盯上”,随时都有被入侵的危险。...2016-01-27
- Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAPPOP3SMTP 代理服务器。...2016-01-27
- 下面小编就为大家带来一篇设置点击文本框或图片弹出日历控件的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧...2016-05-14
- IIS无法显示中文名称图片,但可以通过下面的方法,以后iis下用中文命名的图片也可显示了,但不建议用中文命名图片...2016-01-27
- 本文将为大家收集10个超赞的jQuery图片滑块动画,都是小编精挑细选而来,希望这些现成的jQuery插件将为你节省很多开发时间。...2016-01-26
- 这篇文章主要介绍了php实现异步将远程链接上内容(图片或内容)写到本地的方法,涉及php基于curl进行远程文件传输的相关操作技巧,需要的朋友可以参考下...2016-12-02