图片上传插件用法,net语法【二】

之前一直写过KindeEditor中的小控件作为单独上次,但业务要求需要另一种方式

现在改用ajaxfileupload.js试试,这个一百度

一.首页引用

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

 原理:创建隐藏的表单和iframe然后用JS去提交,获得返回值。

注意:使用AjaxFileUpload插件上传文件可不需要form,如下:

<form name="form" action="" method="POST" enctype="multipart/form-data"> 
……相关html代码…… 
</form> 
因为AjaxFileUpload插件会自动生成一个form提交表单。

对于file文件域ID和name,ajaxFileUpload插件fileElementId参数需要获取文件域ID,如果处理上传文件操作就需要知道文件域name,以便获取上传文件信息,这两者关系一定要清楚。

使用

 var cz = parseInt($('#tj').val());
            var json = {};
            var sx = new Array();
            json["bt"] = $('#bt').val();
            json["lx"] = parseInt($('#lx').attr("data-id"));
            json["bbid"] = parseInt($('#bbid').attr("data-id"));
            json["pid"] = parseInt($('#pid').attr("data-id"));
            json["gnbh"] = $('#gnbh').val();
            json["cz"] = cz;
            for (i = 0; i < $(".template_details .color .clearfix").length; i++) {
                var s = {};
                s["sm"]=$(".template_details .color .clearfix").eq(i).find('span').eq(0).text();
                s["sz"] = $(".template_details .color .clearfix").eq(i).find('span').eq(1).text();
                s["css"] = $(".template_details .color .clearfix").eq(i).find('span').eq(2).text();
                sx[i] = s;
            }
            json["sx"] = sx;
            $.ajaxFileUpload({
                type: "post",             //请求类型:post或get,当要使用data提交自定义参数时一定要设置为post
                url: "/Web/addmb",         //文件上传的服务器端请求地址
                secureuri: false,           //是否启用安全提交,一般默认为false就行,不用特殊处理
                fileElementId: "filePicture",     //文件上传控件的id  <input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" />
                dataType: "JSON",           //返回值类型,一般设置为json,还支持htmlxmlscript类型
                data: { json: encodeURIComponent(JSON.stringify(json)) },//用于post请求提交自定义参数
                success: function (data) {   //服务器成功响应处理函数
                    var gg = $.parseJSON(data);
                    if (gg.yz) {
                        alert("添加成功");
                        $('.template_details').hide();
                        mbcx();
                    }
                    else
                    {
                        alert("添加失败");
                    }
                }
            });

二.后台

.net写法

                    HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
                    moban a = new moban();
                    string imgPath = "";
                    if (hfc[0].FileName != "")
                    {
                        //===================图片保存
                        var filename = hfc[0].FileName.Substring(hfc[0].FileName.LastIndexOf(".") + 1);//取得后缀

var str = "gif|jpg|jpeg|png|GIF|JPG|PNG";
if (str.IndexOf(filename) > -1)
{
filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + filename;
imgPath = "../img/lunbotu/" + filename;
var del = Server.MapPath("../img/lunbotu/" + zt);
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
//======================图片保存
jdlbttp a = db.jdlbttp.FirstOrDefault(u => u.id == cxid);//查询到对应id
a.name = bt;
a.tp = filename;
db.Entry(a).State = System.Data.Entity.EntityState.Modified; //什么更新???
System.IO.File.Delete(del); //删除旧照片
db.SaveChanges();
array["yz"] = true;
}else
{
array["yz3"] = false;
}


                        }
原文地址:https://www.cnblogs.com/h5monkey/p/6120792.html