Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the code for transferring images to the server in seconds using js

零下一度
Release: 2017-05-02 10:37:17
Original
2452 people have browsed it

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("
  • "); 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("
  • "); }); }); }
    Copy after login

    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(); 
     
    }
    Copy after login

    html layout, relatively simple, imitating WeChat:

    Copy after login

    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)); 
    }
    Copy after login

    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:

    Copy after login

    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!

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!