分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

html5 file 上传图片

发布时间:2023-09-06 02:29责任编辑:彭小芳关键词:上传图片

说明:开发环境 vs2012 mvc4项目,后台语言csharp

1、前端代码

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>图片上传测试</title></head><body><form action="/Home/MultiSavePage" enctype="multipart/form-data" method="post"> <input type="file" name="files" id="file1" onchange="checkPic(this)" /><br/> <input type="file" name="files" id="file2" onchange="checkPic(this)"/><br/> <input type="file" name="files" id="file3" onchange="checkPic(this)"/><br/> <input type="submit" value="同时上传多个文件" /> </form> <script type="text/javascript">function checkPic(e) { if (!e || !e.value) return;var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;if (!patn.test(e.value)) {alert("您选择的似乎不是图像文件。");e.value = "";return;}else {//以下的代码可以 把选中的图片 放到img中显示var $file = $(e);var fileObj = $file[0];var windowURL = window.URL || window.webkitURL;var dataURL; //var $img = $("#"+id+"");if (fileObj && fileObj.files && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]);console.log(dataURL);//$img.attr(‘src‘, dataURL);}}}</script></body></html>

2、控制器代码

action="/Home/MultiSavePage" 对应的后台代码 

(1)、正常保存图片,不对图片压缩处理

 ???????public void MultiSavePage(IEnumerable<HttpPostedFileBase> files) ???????{ ???????????Int32 count = files.Count(); ???????????Int32 pid = 56; ???????????Int32 offid = 100; ???????????string str = "GX"; ????????????????string pathForSaving = Server.MapPath("~/img"); ???????????string pagePath = pathForSaving + "/" + offid + "/" + str + "/" + pid; ???????????if (this.CreateFolderIfNeeded(pagePath)) ???????????{ ???????????????foreach (var file in files) ???????????????{ ???????????????????if (file != null && file.ContentLength > 0) ???????????????????{ ?????????????????????????????????string[] picName = file.FileName.Split(‘.‘); ???????????????????????//判断文件的类型 ???????????????????????if (picName[1] == "jpg" || picName[1] == "gif" || picName[1] == "png" || picName[1] == "bmg" || picName[1] == "jpeg") ???????????????????????{ ??????????????????????????????????????????????????//给上传文件重命名 ???????????????????????????string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString(); ??????????????????????????//文件保存的路径 ???????????????????????????string filesavepath = ?filename + "." + picName[1]; ???????????????????????????//保存图片 ???????????????????????????//var path = Path.Combine(pathForSaving, file.FileName); ???????????????????????????var path = Path.Combine(pagePath, filename + "." + picName[1]); ???????????????????????????file.SaveAs(path); ???????????????????????} ??????????????????????????????????????} ???????????????} ???????????} ??????????????????}

注释:

string pathForSaving = Server.MapPath("~/img"); img是项目文件夹,上传的图片都保存到img文件夹下
(2)、对上传的图片压缩处理,并且把图片保存为png格式

 ??public void MultiSavePage(IEnumerable<HttpPostedFileBase> files) ???????{ ???????????Int32 count = files.Count(); ???????????Int32 pid = 56; ???????????Int32 offid = 100; ???????????string str = "GX"; ????????????????string pathForSaving = Server.MapPath("~/img"); ???????????string pagePath = pathForSaving + "/" + offid + "/" + str + "/" + pid; ???????????if (this.CreateFolderIfNeeded(pagePath)) ???????????{ ???????????????foreach (var file in files) ???????????????{ ???????????????????if (file != null && file.ContentLength > 0) ???????????????????{ ?????????????????????????????????string[] picName = file.FileName.Split(‘.‘); ???????????????????????//判断文件的类型 ???????????????????????if (picName[1] == "jpg" || picName[1] == "gif" || picName[1] == "png" || picName[1] == "bmg" || picName[1] == "jpeg") ???????????????????????{ ??????????????????????????????????????????????????//给上传文件重命名 ???????????????????????????string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString(); ??????????????????????????//文件保存的路径 ???????????????????????????string filesavepath = ?filename + "." + picName[1]; ???????????????????????????//保存图片 ???????????????????????????//var path = Path.Combine(pathForSaving, file.FileName); ???????????????????????????var path = Path.Combine(pagePath, filename + "." + picName[1]); ???????????????????????????//file.SaveAs(path); ???????????????????????????Bitmap bitmapTem = (Bitmap)Image.FromStream(file.InputStream);//file图片文件转换为bitmap ??????????????????????????????????????????????????????????????????????????????//压缩图片 ???????????????????????????Bitmap bitmapLast = ZoomImage(bitmapTem, 331, 600); ???????????????????????????bitmapLast.Save(path, System.Drawing.Imaging.ImageFormat.Png); ???????????????????????} ??????????????????????????????????????} ???????????????} ???????????} ??????????????????}

3、用到的其他方法
 ?????// 检查是否要创建上传文件夹 ????????private bool CreateFolderIfNeeded(string path) ???????{ ???????????bool result = true; ???????????if (!Directory.Exists(path)) ???????????{ ???????????????try ???????????????{ ???????????????????Directory.CreateDirectory(path); ???????????????} ???????????????catch (Exception) ???????????????{ ???????????????????//TODO:处理异常 ????????????????????result = false; ???????????????} ???????????} ???????????return result; ???????} 

4、压缩图片的方法

using System.Drawing;

 ???//等比例缩放图片 ???????//destHeight 331 destWidth 600 ???????private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) ???????{ ???????????try ???????????{ ???????????????System.Drawing.Image sourImage = bitmap; ???????????????int width = 0, height = 0; ???????????????//按比例缩放 ??????????????????????????int sourWidth = sourImage.Width; ???????????????int sourHeight = sourImage.Height; ???????????????if (sourHeight > destHeight || sourWidth > destWidth) ???????????????{ ???????????????????if ((sourWidth * destHeight) > (sourHeight * destWidth)) ???????????????????{ ???????????????????????width = destWidth; ???????????????????????height = (destWidth * sourHeight) / sourWidth; ???????????????????} ???????????????????else ???????????????????{ ???????????????????????height = destHeight; ???????????????????????width = (sourWidth * destHeight) / sourHeight; ???????????????????} ???????????????} ???????????????else ???????????????{ ???????????????????width = sourWidth; ???????????????????height = sourHeight; ???????????????} ???????????????Bitmap destBitmap = new Bitmap(destWidth, destHeight); ???????????????Graphics g = Graphics.FromImage(destBitmap); ???????????????g.Clear(Color.Transparent); ???????????????//设置画布的描绘质量 ????????????????????????g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality; ???????????????g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; ???????????????g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; ???????????????g.DrawImage(sourImage, new Rectangle((destWidth - width) / 2, (destHeight - height) / 2, width, height), 0, 0, sourImage.Width, sourImage.Height, GraphicsUnit.Pixel); ???????????????g.Dispose(); ???????????????//设置压缩质量 ????????????????????System.Drawing.Imaging.EncoderParameters encoderParams = new System.Drawing.Imaging.EncoderParameters(); ???????????????long[] quality = new long[1]; ???????????????quality[0] = 100; ???????????????System.Drawing.Imaging.EncoderParameter encoderParam = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality); ???????????????encoderParams.Param[0] = encoderParam; ???????????????sourImage.Dispose(); ???????????????return destBitmap; ???????????} ???????????catch ???????????{ ???????????????return bitmap; ???????????} ???????}
 

html5 file 上传图片

原文地址:https://www.cnblogs.com/net064/p/10234602.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved