js相关代码
一种是form表单提交,一种是base64
//多文件上传
function fileClick() {
//在input file内容改变的时候触发事件
$('#filed').change(function () {
if ($('.trphoto td img').length === 3) {
alert("至多只能上传3张图片!请先点击图片删除!"); return
}
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象,.get(0)转为原生对象;
//这边默认只能选一个,但是存放形式仍然是数组,所以取第一个元素使用[0];
var file = $('#filed').get(0).files[0];
var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
if (!pattern.test(file.type)) {
alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片!");
//file.focus();
return;
}
//debugger
$("#mmzpfile").ajaxSubmit({
url: "JZ_ZY_ZZ_UPDATE.aspx",
type: "post",
data: { "action": "upfile_IMG" },
resetForm: "true",
beforSubmit: function () {
},
success: function (msg) {
$(".trphoto td").append("<img onclick=\"zzxximg(this)\" title=\"点击图片删除\" src=\"" + msg + "\" style=\"width:200px;border:1px solid #8FADD1;\"></img>")
$(".trphoto").show()
BAMMZP += msg + "|"
}
})
//创建用来读取此文件的对象
//var reader = new FileReader();
使用该对象读取file文件
//reader.readAsDataURL(file);
读取文件成功后执行的方法函数
//reader.onload = function (e) {
// //读取成功后返回的一个参数e,整个的一个进度事件
// //console.log(e);
// //选择所要显示图片的img,要赋值给img的src就是e中target下result里面
// //的base64编码格式的地址
// //debugger
// $(".trphoto td").append("<img onclick=\"zzxximg(this)\" title=\"点击图片删除\" src=\"" + reader.result + "\" style=\"width:200px;border:1px solid #8FADD1;\"></img>")
// $(".trphoto").show()
// BAMMZP += reader.result + "|"
//}
})
}
function zzxximg(thiss) {
if (confirm("确认删除吗")) {
var hcnr = $(thiss).attr("src");
//var RYHCID = $("#RYHCID").val();
//var HCBT = $(thiss).parent().parent().children().eq(0).html();
$(thiss).remove();
BAMMZP = BAMMZP.replace(hcnr + "|", "");
}
}
html
<!--门面照片-->
<tr class="mmzp">
<td class="zuzhi-tabletd" colSpan="2">
<span style="color:red">*</span>门面照片
</td>
<td class="zuzhi-tabletd" colSpan="2">
<form id="mmzpfile">
<div id="pox">
<input type="file" id="filed" name="files" class="file" accept="image/*"/>
</div>
</form>
</td>
</tr>
后台cs
if (action == "upfile_IMG")
{
System.Web.HttpPostedFile file = context.Request.Files["files"];
string colname = UploadPicture(file, context);
SYS_LOG.Log(context, Entity.Operation.上传图片, "保安从业单位上传图片");
return colname;
}
/// <summary>
/// 上传图片
/// </summary>
/// <param name="file"></param>
/// <param name="context"></param>
/// <returns></returns>
private string UploadPicture(System.Web.HttpPostedFile file, System.Web.HttpContext context)
{
try
{
string action = context.Request["action"];
if (file == null)
{
return "请上传文件!";
}
string FileName = Path.GetFileName(file.FileName);
string Extension = Path.GetExtension(FileName);
//判断文件类型
if (action == "upfile_IMG")
{
//判断是否为图片文件
if (!Extension.Equals(".png") && !Extension.Equals(".jpg"))
{
string url = "请选择图片文件(*.png,*.jpg)";
return url;
}
}
int ContentLength = file.ContentLength;
if (ContentLength > MaxSize)
{
return "文件的大小超过限制15M最大上传15M以内的文件!";
}
//创建文件夹
String Folder = "NewFile";
String Dates = DateTime.Now.ToString("yyyyMMdd");
String MapPath = context.Server.MapPath("~/");
MapPath += Folder + "\\";
String MapPathtwo = "";
MapPathtwo = MapPath + Dates + "\\";
if (!Directory.Exists(MapPathtwo))
{
Directory.CreateDirectory(MapPathtwo);
}
string FileNameWithOutExtension = Path.GetFileNameWithoutExtension(FileName);
FileNameWithOutExtension += "_" + DateTime.Now.ToString("yyyyMMddHHmss");
string newFileName = FileNameWithOutExtension + Extension;
//上传文件
file.SaveAs(MapPathtwo + newFileName);
string HJSQ = Folder + "/" + Dates + "/" + newFileName;
if (action == "upfile_IMG")
{
return HJSQ;
}
else
{
return "";
}
}
catch (Exception ex)
{
SYS_LOG.Log(context, Entity.Operation.上传图片, "保安从业人员上传图片-" + ex);
return "上传失败";
}
}