c# 多个图片单独上传 保存到指定文件夹 保存到数据库

Posted 如果冬天没有雪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了c# 多个图片单独上传 保存到指定文件夹 保存到数据库相关的知识,希望对你有一定的参考价值。

1.引用js文件

  <script src="~/Scripts/uploadPreview.js"></script>

<html>

//toCalid()在表单提交之前进行非空验证

  <form action="/Home/insertImg" method="post" enctype="multipart/form-data"  onsubmit="return toCalid()">

      <ul>

        <li>

                               <input type="file" id="up_img_WU_FILE_0" name="p1" />
                               <img id="imgShow_WU_FILE_0" width="100" height="100" />

        </li>

                      <li>

                               <input type="file" id="up_img_WU_FILE_1" name="p1" />
                               <img id="imgShow_WU_FILE_1" width="100" height="100" />

        </li>

      </ul>

  </form>

</html>

 

[post]

public Actionresult insertImg(){

  //获取图片信息

  HttpPostedFileBase file = Request.Files["p1"];

     string filename="";

    string ensrc1 ="";

  //判断是否有图片

  if(file.length>1){

     //获取文件名

                filename = Path.GetFileName(file.FileName);
                string privous = filename.Substring(0, filename.LastIndexOf(‘.‘));
      string next = filename.Substring(filename.LastIndexOf(‘.‘));

      //存储位置
      string filepath = Path.Combine(Server.MapPath("~/Enclosures/"), filename);

      //存储
      file.SaveAs(filepath);

      //存储的路径  端口+文件位置+文件名
      ensrc1 = "http://" + Request.UrlReferrer.Authority + "/Enclosures/" + filename;

 

     }

  //调用BLL层方法,将参数代入进去即可

 

}

js文件:

var uploadPreview = function(setting) {

var _self = this;

_self.IsNull = function(value) {
if (typeof (value) == "function") { return false; }
if (value == undefined || value == null || value == "" || value.length == 0) {
return true;
}
return false;
}

_self.DefautlSetting = {
//UpBtn: "",
UpBtn: "",
DivShow: "",
ImgShow: "",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",
callback: function() { }
};

_self.Setting = {
uploader: ‘/Commodity/FileImageUpdateOrAdd‘,
UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,
DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,
ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,
Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,
Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,
ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,
ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,
callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
};

_self.getObjectURL = function(file) {
var url = null;

if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}

_self.Bind = function() {

document.getElementById(_self.Setting.UpBtn).onchange = function() {
if (this.value) {
if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert(_self.Setting.ErrMsg);
this.value = "";
return false;
}
if (navigator.userAgent.indexOf("MSIE") > -1) {
try {
document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
} catch (e) {
var div = document.getElementById(_self.Setting.DivShow);
this.select();
top.parent.document.body.focus();
var src = document.selection.createRange().text;
document.selection.empty();
document.getElementById(_self.Setting.ImgShow).style.display = "none";
div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
div.style.width = _self.Setting.Width + "px";
div.style.height = _self.Setting.Height + "px";
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
}
} else {
document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
}
_self.Setting.callback();
}

}
}

_self.Bind();
}

 

function file_click(){
var WARP = document.getElementById(‘warp‘);
var WARP_LI = WARP.getElementsByTagName(‘li‘);
for(var i=0; i<WARP_LI.length;i++){
new uploadPreview({ UpBtn: "up_img_WU_FILE_"+i, ImgShow: "imgShow_WU_FILE_"+i});
}
}
window.onload = file_click;

 

以上是关于c# 多个图片单独上传 保存到指定文件夹 保存到数据库的主要内容,如果未能解决你的问题,请参考以下文章

c# WinForm中上传一个图片到服务器,然后把服务器的相对路径存入数据库中

c# 保存图片文件 winform

求ASP上传图片代码(上传图片到指定文件夹,同时获取路径保存到数据库中)

c#客户端图片上传到服务器端文件并且把路径保存到vs自带数据库

c# 本地图片 上传到另一个服务器

ASP.NET中如何上传图片到服务器所制定的一个文件夹中去?