hbuilder mui uploader图片上传到服务器完整版(ASP.NET)
2023-09-14 09:00:19 时间
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>
页面初始化的一些操作:
- document.addEventListener("plusready", plusReady, false);
- function plusReady() {
- document.getElementById("addnew").addEventListener("tap", function() {
- showActionSheet();//拍照还是相册
- });
- document.getElementById("fabiao").addEventListener("tap", function() {
- upload();//上传文件
- });
- plus.nativeUI.closeWaiting();
- }
页面中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>");
- });
- });
- }
服务端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));
- }
速度非常快,测试过,如果不压缩速度没有明显的下降,但是考虑到显示时候加载的问题,还是进行了压缩
相关文章
- 无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同。
- ASP .NET CORE MVC 部署Windows 系统上 IIS具体步骤---.Net Core 部署到 IIS位系统中的步骤
- ASP.NET通过http/https的POST方式,发送和接受XML文件内容
- 【AaronYang第一讲】ASP.NET MVC企业开发的基本环境[资源服务器概念]
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API 续
- C#.NET常见问题(FAQ)-如何把资源嵌入到项目中
- ASP.NET MVC 数据传递 控制器向视图传递
- ASP.NET生成验证码
- ASP.Net Web中Repeater怎么删除指定行
- ASP.NET MVC
- 重新整理 .net core 实践篇—————工作单元模式[二十六]
- .NET、C#和ASP.NET三者之间的区别
- WCF The service cannot be activated because it does not support ASP.NET compatibility
- ASP.NET Core的几种服务器类型[共6篇]
- ASP.NET Core高性能服务器HTTP.SYS
- [ASP.NET Core 3框架揭秘] 配置[5]:配置数据与数据源的实时同步
- ASP.NET Core的路由[3]:Router的创建者——RouteBuilder
- 学习ASP.NET Core,怎能不了解请求处理管道[2]: 服务器在管道中的“龙头”地位
- 学习ASP.NET Core,你必须了解无处不在的“依赖注入”
- 《ASP.NET MVC 5框架揭秘》样章发布
- Atitit ..Net Framework sdk 3.0 3.5 4.04.5 4.6 4.7 .net core版本新特性 v2 s22 1. 新特性来源于 down ms 官方网站1
- asp.net关于WEB端用户重复提交问题。禁用服务器控件按钮问题。
- ASP.NET Web Forms - Validation 服务器控件
- ASP.NET Web Forms - 服务器控件
- ASP.NET Web Forms - 教程
- ASP.NET MVC - 视图
- Kubernetes初探[1]:部署您的第一个ASP.NET Core应用到k8s集群
- 在线编辑PDF:RAD PDF for ASP.NET
- ASP.NET Core微服务(二)——【ASP.NET Core Swagger配置】
- ASP.NET给图片加水印