This article mainly introduces the complete code of uploader to transfer pictures to the server in detail. It has a certain reference value. Interested friends can refer to it
First look at the renderings:
js part of the page
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("
Some operations for page initialization:
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 layout, relatively simple, imitating WeChat:
Server-side asp.net version
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)); }
The speed is very It’s fast. I’ve tested it. If it’s not compressed, the speed won’t drop significantly. However, considering the problem of loading during display, compression is still performed.
The added CSS actually has no style:
The plus sign is the font: iconfont.cn/
The head style is the second modification of the HB style. If you are not using If you are developing at HB, you can just write the CSS yourself.
The above is the detailed content of Detailed explanation of the code for transferring images to the server in seconds using js. For more information, please follow other related articles on the PHP Chinese website!