Android H5拍照或选择上传图片+WebApi服务端保存文件

版权声明：本文为博主原创文章，只为分享而编，欢迎各位学习以及转载。 https://blog.csdn.net/qq285679784/article/details/81003287

H5拍照+H5选照片

<em id="clock_imgs"></em><a href="javascript:captureImage();">选择图片</a>
<button type="button" id="submit" >提交</button>

var files = [],index = 1;

// 拍照
function captureImage() {

	if(files.length >= 5) {
		alert('最多只能上传5张照片');
		return;
	}

	var actionbuttons = [{
		title: "拍照"
	}, {
		title: "从相册中选择"
	}];
	var actionstyle = {
		title: "选择图片",
		cancel: "取消",
		buttons: actionbuttons
	};
	plus.nativeUI.actionSheet(actionstyle, function(e) {
		switch(e.index) {
			case 1: //拍照
				plus.camera.getCamera().captureImage(function(p) {
					appendFile(p);
				});
				break;
			case 2: //从相册中选择
				plus.gallery.pick(function(p) {
					appendFile(p);
				});
				break;
		}
	});
}
// 显示
function appendFile(p) {
	plus.io.resolveLocalFileSystemURL(p, function(entry) {
		console.log(p);
		console.log(entry.toLocalURL());

		var path = entry.toLocalURL();
		$("#clock_imgs").append('<img src '+path+'/>');
		files.push({
			name: "uper" + index,
			path: path
		});
		index++;

		$('#clock_imgs>img').click(function() {
			$(this).remove();
			files.splice($(this).index(), 1);
		});
	}, function(e) {
		alert('读取照片文件错误：' + e.message);
	});
}

H5上传文件

$("#submit").click(function() {

	if(files.length <= 0) {
		alert('请拍照或选择照片');
		return;
	}
	plus.nativeUI.showWaiting();//显示加载图标
	var task = plus.uploader.createUpload(//创建上传任务
		'http://api.chinalzw-cloud.com/api/uploader'//上传服务器连接
                , {method: "POST"},//post请求
		function(t, status) {//返回结果
			plus.nativeUI.closeWaiting();//隐藏加载图标
			console.log(JSON.stringify(t));
			console.log(status);
			//上传成功
			if(status == 200) {
				alert("上传成功：" + status);

				alert('打卡成功：当前时间' + new Date().toString());
			} else {
				alert("上传失败：" + status);
			}
		}
	);
	task.addData("uid", "value");//设置POST参数uid，根据需求传post参数
	for(var i = 0; i < files.length; i++) {//for循环添加需要上传的文件
		var f = files[i];
		task.addFile(f.path, {
			key: f.name
		});
	}
	task.start();

});

WebApi服务端

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

using System.Web;
using System.IO;

namespace API.Controllers
{
    public class UploaderController : ApiController
    {
        /// <summary>
        /// 上传文件
        /// </summary>
        /// <returns></returns>
        [Route("~/uploader"), HttpPost]
        public string Post()
        {
            if (HttpContext.Current.Request.Form["uid"] == null)
            {
                return "缺少uid参数。";
            }
            //POST参数
            int uid = Convert.ToInt32(HttpContext.Current.Request.Form["uid"]);
            string r = "";

            try
            {
                HttpFileCollection files = HttpContext.Current.Request.Files;
                if (files != null && files.Count > 0)
                {
                    for (int i = 0; i < files.Count; i++)
                    {
                        HttpPostedFile file = files[i];
                        string filePath = HttpContext.Current.Server.MapPath("~/upload_files/") + file.FileName;
                        file.SaveAs(filePath);
                    }
                }

                return "上传成功。userid:"+ userid;
            }
            catch (Exception ex)
            {
                return "上传失败。";
            }
        }
    }
}