.NET。layui上传图片之webform版
JS代码
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新增</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src="Scripts/jquery-3.4.1.js"></script>
<script src="layuiadmin/layui/layui.js"></script>
<script src="layuiadmin/layui/lay/modules/layer.js"></script>
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="layuiadmin/layui/css/modules/layer/default/layer.css" media="all" />
<link rel="stylesheet" href="layuiadmin/style/admin.css" media="all" />
<script type="text/javascript">
var layer, form, laypage, index, newindex, laydate, upload;
$(function () {
layui.use(['layer', 'form', 'laypage', 'laydate', 'upload'], function () {
layer = layui.layer;
form = layui.form;
laypage = layui.laypage;
laydate = layui.laydate;
upload = layui.upload;
//普通图片上传Banner_ADD.aspx?act=uploadIMG
var uploadInst = upload.render({
elem: '#test1'
, url: 'ashx/UploadIMG.ashx?action=oneIMG'
, accept: 'images'
, size: 50000
, before: function (obj) {
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result);
});
}
, done: function (res) {
//如果上传失败
//if (res.code > 0) {
// return layer.msg('上传失败');
//}
//上传成功
var demoText = $('#demoText');
demoText.html('<span style="color: #4cae4c;">上传成功</span>');
var fileupload = $(".image");
fileupload.attr("value", res.data.src);//这里是放隐藏域里图片的地址，提交时候存数据库里用
//console.log(fileupload.attr("value"));
}
, error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
});
});
</script>
</head>HTML代码
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-header">表单</div>
<div class="layui-card-body" style="padding: 15px;">
<form class="layui-form" lay-filter="component-form-group" data-ajax="false" enctype= "multipart/form-data">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" id="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" />
</div>
</div>
<!--************这里是上传图片的代码***************-->
<!--************这里添加的隐藏的输入框，用来传递images的参数***************-->
<input type="hidden" name="images" class="image"/>
<div class="layui-form-item">
<label class="layui-form-label ">照片:</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1"/>
<p id="demoText"></p>
</div>
</div>
</div>
<!--************上面里是上传图片的代码***************-->
<div class="layui-form-item layui-layout-admin">
<div class="layui-input-block">
<div class="layui-footer" style="left: 0;">
<button class="layui-btn sim_btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>ASHX代码
using DAL;
using Model;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
namespace Web.ashx
{
/// <summary>
/// UploadIMG 的摘要说明
/// </summary>
public class UploadIMG : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["action"].ToString();
switch (action)
{
case "oneIMG":
UploadIMG_ONE(context);
break;
case "moreIMG":
UploadIMG_ONE(context);
break;
default:
break;
}
}
/// <summary>
/// 单张图片上传
/// </summary>
/// <param name="context"></param>
public void UploadIMG_ONE(HttpContext context)
{
IMGJson resultInfo = new IMGJson() { fileid = "", src = "", name = "", msg = "上传出错,请检查文件名或文件内容" };
try
{
var file = context.Request.Files[0];
var filecombin = file.FileName.Split('.');
if (file == null || String.IsNullOrEmpty(file.FileName) || file.ContentLength == 0 || filecombin.Length < 2)
{
}
//定义本地路径位置
string local = "Upload\\" + System.DateTime.Now.ToString("yyyyMMdd");
string filePathName = string.Empty;
string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);
var tmpName = HttpContext.Current.Server.MapPath("~/Upload/" + System.DateTime.Now.ToString("yyyyMMdd") + "/");
var tmp = file.FileName;
var tmpIndex = 0;
//判断是否存在相同文件名的文件 相同累加1继续判断
while (System.IO.File.Exists(tmpName + tmp))
{
tmp = filecombin[0] + "_" + ++tmpIndex + "." + filecombin[1];
}
//不带路径的最终文件名
filePathName = tmp;
if (!System.IO.Directory.Exists(localPath))
System.IO.Directory.CreateDirectory(localPath);
string localURL = Path.Combine(local, filePathName);
file.SaveAs(Path.Combine(localPath, filePathName)); //保存图片（文件夹）
resultInfo.src = localURL.Trim().Replace("\\", "/");
resultInfo.name = Path.GetFileNameWithoutExtension(file.FileName);// 获取文件名不含后缀名
resultInfo.fileName = System.DateTime.Now.ToString("yyyyMMdd") + "/" + filePathName;
}
catch (Exception ex)
{
Common.CreateWebLog("异常", "异常了" + ex.Message.ToString()); ;
}
string resultJson = JsonHelper.ObjectToJSON(resultInfo);
context.Response.Write(resultJson);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
浙公网安备 33010602011771号