zoukankan      html  css  js  c++  java
  • 上传文件(单文件)(FormData)(前端代码+.NET服务器端)

    由于样式需要不能直接用file,只能用文本框+按钮

    <form class="form-horizontal form-bordered form-row-strippe"  enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo" data-toggle="validator">
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="control-group">
                                <label class="control-label" style=" 125px;">
                                    审批项目名称:</label>
                                <div class="controls" style="margin-left: 0px;">
                                    <input type="text" id="id" name="id" style="display:none;" value="$id$" />
                                    <input type="text" id="projectname" name="projectname" class="m-wrap large" value="$projectname$" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" style=" 125px;">
                                    审批项目说明:</label>
                                <div class="controls" style="margin-left: 0px;">
                                    <input class="m-wrap large" type="text" id="projectinfo" name="projectinfo" value="$projectinfo$" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" style=" 125px;">
                                    审批项目文件:</label>
                                <div class="controls" style="margin-left: 0px;">
                                    <input type="file" id="filepath" name="filepath" style="display:none" onchange="changetext()" />
                                    <input class="m-wrap" type="text" id="pathfile" name="pathfile" readonly="readonly" value="$filepath$" />
                                    <input class="btn green" type="button" value="选择文件" id="uploadpath" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-info">
                        <input class="btn blue" type="button" id="btnsubmit" value="提交" onclick="update()" data-dismiss="modal" />
                        <button type="button" class="btn green" data-dismiss="modal">
                            取消</button>
                    </div>
                </form>
    View Code(HTML)
     1 <script type="text/javascript">
     2     jQuery(document).ready(function () {
     3         $('#uploadpath').click('click', function () {
     4             $('#filepath').trigger('click');
     5         });
     6     })
     7     function changetext()
     8     {
     9         if ($("#filepath").val() == "") {
    10             //当用户没有选择文件时,不修改原有路径
    11         }
    12         else {
    13             $("#pathfile").val($("#filepath").val());
    14         }
    15     }
    16     function update() {
    17         var projectname = $("#projectname").val();
    18         var projectinfo = $("#projectinfo").val();
    19         var filepath = $("#pathfile").val();
    20         //var formData = new FormData($("#fileinfo")[0]);//两者皆可
    21         var formData = new FormData(document.forms.namedItem("fileinfo"));
    22         formData.append("id", $id$);
    23         $.ajax({
    24             url: "/ApprovalProcessNoView/queryeditproject",
    25             type: "POST",
    26             data: formData,
    27             async: false,
    28             cache: false,
    29             contentType: false,
    30             processData: false,
    31             success: function (data) {
    32                 alert(data.msg);
    33             },
    34             error: function (data) {
    35                 alert(data.msg);
    36             }
    37         });
    38     }
    39 </script>
    View Code(JAVASCRIPT)
     1 returnresult rr = new returnresult();
     2             string projectname = Request.Form["projectname"];
     3             string projectinfo = Request.Form["projectinfo"];
     4             HttpPostedFileBase pathfile = Request.Files["filepath"];
     5             long id = Request.Form["id"].ToLong();
     6 
     7             string path = "/UF/Uploads/myfile";
     8             //获取上传目录 转换为物理路径
     9             string uploadPath = Server.MapPath(path);
    10             //判断目录是否存在
    11             if (!Directory.Exists(uploadPath))
    12             {
    13                 Directory.CreateDirectory(uploadPath);
    14             }
    15             //保存文件的物理路径
    16             string saveFile = uploadPath + pathfile.FileName;
    17             //保存图片到服务器
    18             try
    19             {
    20                 pathfile.SaveAs(saveFile);
    21                 rr.status = true;
    22             }
    23             catch (Exception)
    24             {
    25                 rr.status = false;
    26                 rr.msg = "文件上传失败";
    27             }
    View Code(后台代码【C#】)

    主要使用:FormData

    效果:将文件和其他需要上传的数据一起上传

  • 相关阅读:
    PAT 甲级 1101 Quick Sort
    PAT 甲级 1038 Recover the Smallest Number
    #Leetcode# 112. Path Sum
    #Leetcode# 17. Letter Combinations of a Phone Number
    #Leetcode# 235. Lowest Common Ancestor of a Binary Search Tree
    C++结构体重构
    【NOIP2016提高A组模拟9.7】鼎纹
    快速幂总结
    【NOIP2013提高组】货车运输
    【NOIP2015提高组】运输计划
  • 原文地址:https://www.cnblogs.com/jianghaidong/p/5583204.html
Copyright © 2011-2022 走看看