zoukankan      html  css  js  c++  java
  • 图片上传插件用法,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;
    }

    
                            }
  • 相关阅读:
    JS元素分组统计
    并发工具类
    【Spring-Cloud】mall eureka微服务模块建立
    【Spring-Cloud】mall父工程建立
    【MySQL】创建函数和存储过程,批量插入大数据
    【JAVA】http 状态
    【JAVA】如何写好代码
    【Docker】dockerfile,支持jdk8、 sshd、 python3.6
    【Hadoop】MapperReduce WordCount 代码示例
    【Hadoop】YARN 完全分布式配置
  • 原文地址:https://www.cnblogs.com/h5monkey/p/6120792.html
Copyright © 2011-2022 走看看