原生 js 上传图片

<!doctype html>
<html>
<head><meta charset="utf-8"><title>js上传图片</title>
</head>
<body><input id="file" type="file"><script type="text/javascript">window.onload = function myfunction() {var input = document.getElementById('file');input.onchange = function () {var files = this.files;for (var i = 0, len = files.length; i < len; i++) {var file = files[i];//file.name || file.fileName  => 文件名称//file.size || file.fileSize  => 文件大小
                    upload_html5(file);}};}function upload_html5(file) {//html5 上传var xhr = new XMLHttpRequest();//上传进度事件
            xhr.upload.addEventListener("progress", function (e) { }, false);//上传完成（成功）事件
            xhr.addEventListener("load", function (e) {//获取服务器响应var obj = JSON.parse(e.target.responseText);if (obj.code == 200) {alert("上传成功");}else {alert(obj.message);}}, false);//上传失败事件
            xhr.addEventListener("error", function (e) {console.log(e); alert("上传失败");}, false);//上传中断（取消）事件
            xhr.addEventListener("abort", function (e) {alert("上传取消");}, false);var fd = new FormData;//添加要上传的文件对象
            fd.append("file", file);fd.append("hallName", '分会场1');fd.append("dateTime", '2019-06-21');xhr.open("POST", "/Common/UploadFile");xhr.send(fd);}</script>
</body>
</html>

        public ActionResult UploadFile(){var baseDirectory = AppDomain.CurrentDomain.BaseDirectory;var directory = string.Format("{0}/Upload/{1}/", baseDirectory, Request.Form["hallName"]);if (!Directory.Exists(directory))Directory.CreateDirectory(directory);var file = Request.Files[0];var fileTypes = new string[] { "image/jpeg", "image/gif", "image/png" };if (!fileTypes.Contains(file.ContentType))return Json(new Response(302, "只可上传图片"));Image img = Image.FromStream(file.InputStream);var filePath = string.Format("{0}/{1}.jpg", directory, Request.Form["dateTime"]);ImageCompress(img, filePath, 50);return Json(new Response());}/// <summary>/// 将图片按百分比压缩/// </summary>public static bool ImageCompress(Image source, string savePath, byte percent){var parameters = new EncoderParameters();parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, new long[] { percent });try{ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageDecoders();ImageCodecInfo jpegICIinfo = arrayICI.SingleOrDefault(a => a.FormatDescription.Equals("JPEG", StringComparison.OrdinalIgnoreCase));if (jpegICIinfo != null)source.Save(savePath, jpegICIinfo, parameters);elsesource.Save(savePath, source.RawFormat);return true;}catch (Exception ex){return false;}finally{source.Dispose();}}

转载于:https://www.cnblogs.com/kikyoqiang/p/11064841.html

原生 js 上传图片相关推荐

Java接受blob类型图片_原生JS上传图片接收服务器端图片并且显示图片（主要描述blob类型）...
1.了解后端处理图像的方式一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
原生JS上传图片接收服务器端图片并且显示图片（主要描述blob类型）
1.了解后端处理图像的方式一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局，原生JS实现的瀑布流布局，代 - phpStudy...
原生JS实现响应式瀑布流布局原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
ajax 原生js操作ajax
一.ajax 1.什么是ajax? ajax是异步javascript与xml,它是多种技术一个集合.可以无刷新状态更新页面. 2.ajax的优缺点: ...
原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列
昨天去面了滴滴,一口气面了三面,考了 promise 和事件循环.之前的猿辅导也考察了这些,几乎所有的大厂中厂都一定会考原生 js 的事件循环队列. 今天,我把昨天考察的原题拿出来分析一下. setT ...

原生 js 上传图片

原生 js 上传图片相关推荐

最新文章

热门文章