.Net Html如何上传图片到一般应用程序

2018-06-22 07:43:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

html实现图片上传 后台采用.net其中在这里要借用一个js插件 

在这里我会写一个图片上传的一个小Demo,有不全的地方多多包容,和提议,

我把已经写好的demo已经上传到百度云 在这里可以下载 https://pan.baidu.com/s/1qY2STh6

可以直接运行,Default.aspx是单张图片上传。Default2.aspx是多张图片上传,仿照的 http://fex.baidu.com/webuploader/demo.html

开始 html中的内容是

<body>
<div>
<div>
<img src="images/photo.jpg" id="user_head" width="140" height="140" />
<p>
图片格式:GIF、JPG、JPEG、PNG<br />
图片大小:最高不超过500K
</p>
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div>

</div>
</div>
</body>

其中在

<link href="js/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/webuploader-0.1.5/webuploader.js"></script>
<script>
$(function () {

var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: 'js/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: 'ashx/fileupload.ashx',
// 选择文件的按钮。可选。<a href="js/webuploader/server/fileupload.ashx">js/webuploader/server/fileupload.ashx</a>
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,png',
mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png'
},
});
//上传成功触发事件
uploader.on('uploadSuccess', function (file, response) {
$("#user_head").attr("src", response.id);
});
//上传前触发事件
uploader.on( 'fileQueued', function( file ) {
uploader.options.formData = { src: $("#user_head").attr("src") == "images/photo.jpg" ? "" : $("#user_head").attr("src") };
})
})
</script>

这样图片请求就到了 ashx/fileupload.ashx一般处理程序

 

 

/// <summary>
/// 文件保存操作
/// </summary>
/// <param name="basePath"></param>
private void SaveFile(string basePath = "~/images/")
{
var name = string.Empty;
basePath = (basePath.IndexOf("~") > -1) ? System.Web.HttpContext.Current.Server.MapPath(basePath):basePath;//获取绝对路径
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
//如果目录不存在,则创建目录
if (!Directory.Exists(basePath))
{
Directory.CreateDirectory(basePath);
}

var suffix = files[0].ContentType.Split('/');
//获取文件格式
var _suffix = suffix[1];//suffix[1].Equals("jpeg", StringComparison.CurrentCultureIgnoreCase) ? "" :
var _temp = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo); //System.Web.HttpContext.Current.Request["name"];
//如果不修改文件名,则创建随机文件名
if (!string.IsNullOrEmpty(_temp))
{
name = _temp + "." + _suffix;
}
else
{
Random rand = new Random(24 * (int)DateTime.Now.Ticks);
name = rand.Next() + "." + _suffix;
}
//文件保存
var full = basePath + name;
files[0].SaveAs(full);
var _result = "{\"jsonrpc\" : \"2.0\", \"result\" : null, \"id\" : \"images/" + name + "\"}";
if (image != "")
{
//删除指定文件
string image_n = image.Split('/')[image.Split('/').Length - 1];
ImageDemo.Upload.Upload.DeleteFile(basePath, image_n);
}
//返回处理结果 -------结束
System.Web.HttpContext.Current.Response.Write(_result);
}

这个如果帮上了你的忙,可以为我点一下赞哦,

到这里就完成了图片上传,如果你们没有看懂的话可以留言,我将会全力帮助 

jQuery File Upload 参考API:  http://fex.baidu.com/webuploader/doc/

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:微信上 网页图片点击全屏放大

下一篇:asp.net webform 自定义分页控件