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;
    }

    
                            }
  • 相关阅读:
    python爬取斗图网中的 “最新套图”和“最新表情”
    SpringBoot (1) idea下的环境搭建及demo
    python爬取视频网站m3u8视频,下载.ts后缀文件,合并成整视频
    微信小程序—day05
    从零起步做到Linux运维经理, 你必须管好的23个细节
    前后端分离原理
    图文并茂|为你揭开微服务架构的“神秘面纱”!
    swarm集群日常部分操作
    OpenStack 部署运维实战
    京东618:Docker扛大旗,弹性伸缩成重点 (2015-06-23)
  • 原文地址:https://www.cnblogs.com/h5monkey/p/6120792.html
Copyright © 2011-2022 走看看