使用 jquery ajax 和 asp.net 处理程序上传文件

2024-05-23

我正在努力让它工作,但我在上传文件时遇到错误。

ASPX

<asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" />
<asp:Button runat="server" ID="btnUpload" CssClass="btn upload" Text="Upload" />

Handler

public void ProcessRequest(HttpContext context)
      {
            context.Response.ContentType = "multipart/form-data";
            context.Response.Expires = -1;
            try
            {
                  HttpPostedFile postedFile = context.Request.Files["file"];
                  string savepath = HttpContext.Current.Server.MapPath("~/assets/common/CompetitionEntryImages/");
                  var extension = Path.GetExtension(postedFile.FileName);

                  if (!Directory.Exists(savepath))
                        Directory.CreateDirectory(savepath);

                  var id = Guid.NewGuid() + extension;
                  if (extension != null)
                  {
                        var fileLocation = string.Format("{0}/{1}",
                                                         savepath,
                                                         id);

                        postedFile.SaveAs(fileLocation);
                        context.Response.Write(fileLocation);
                        context.Response.StatusCode = 200;
                  }
            }
            catch (Exception ex)
            {
                  context.Response.Write("Error: " + ex.Message);
            }
      }

Jquery

$(document).ready(function () {
            email = $("input[id$='emailHV']").val();
            alert(email);
            $('#aspnetForm').attr("enctype", "multipart/form-data");
      });



$('#<%= btnUpload.ClientID %>').on('click', function (e) {
            e.preventDefault();
            var fileInput = $('#ctl00_PageContent_Signup_ctl06_MWFileUpload_FileUpload1');
            var fd = new window.FormData();
            fd.append('file', fileInput.files[0]);

            $.ajax({
                  url: '/charity-challenge/MWFileUploadHandler.ashx',
                  data: fd,
                  processData: false,
                  contentType: false,
                  type: 'POST',
                  success: function (data) {
                        alert(data);
                  }
            });
      });

Error

HTML

<input type="file" name="ctl00$PageContent$Signup$ctl06$MWFileUpload$FileUpload1" id="ctl00_PageContent_Signup_ctl06_MWFileUpload_FileUpload1" class="file-upload-dialog">

 <input type="submit" name="ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload" 
value="Upload" onclick="javascript:WebForm_DoPostBackWithOptions(new 
WebForm_PostBackOptions(&quot;ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload&quot;, 
&quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" 
id="ctl00_PageContent_Signup_ctl06_MWFileUpload_btnUpload" class="button">

EDITS

最后,我通过做这些事情来形成数据来让它工作

var fileData = fileInput.prop("files")[0];   // Getting the properties of file from file field
        var formData = new window.FormData();                  // Creating object of FormData class
        formData.append("file", fileData); // Appending parameter named file with properties of file_field to form_data
        formData.append("user_email", email);

完整的工作代码

$('#<%= btnUpload.ClientID %>').on('click', function (e) {
            e.preventDefault();
            var fileInput = $('#<%= FileUpload1.ClientID %>');
            var fileData = fileInput.prop("files")[0];   // Getting the properties of file from file field
            var formData = new window.FormData();                  // Creating object of FormData class
            formData.append("file", fileData); // Appending parameter named file with properties of file_field to form_data
            formData.append("user_email", email);
            $.ajax({
                  url: '/charity-challenge/MWFileUploadHandler.ashx',
                  data: formData,
                  processData: false,
                  contentType: false,
                  type: 'POST',
                  success: function (data) {
                        var obj = $.parseJSON(data);
                        if (obj.StatusCode == "OK") {
                              $('#<%= imagePath.ClientID %>').val(obj.ImageUploadPath);
                              $('.result-message').html(obj.Message).show();
                        } else if (obj.StatusCode == "ERROR") {
                              $('.result-message').html(obj.Message).show();
                        }
                  },
                  error: function (errorData) {
                        $('.result-message').html("there was a problem uploading the file.").show();
                  }
            });
      });

经过一整个下午的敲打,当我意识到你指定了“处理程序”而不是“服务”时,我回到了这个问题/解决方案,差别很大。 :) 另外,对于可以在后面运行此 jquery 的工作处理程序,我去了https://github.com/superquinho/jQuery-File-Upload-ASPnet https://github.com/superquinho/jQuery-File-Upload-ASPnet并剪掉了我不需要的东西。这是我正在使用的处理程序代码(VS2012)。正如你所看到的,我现在只使用它来上传 csv。

Imports System
Imports System.Web
Imports System.Data

Public Class FileUpload : Implements IHttpHandler, IReadOnlySessionState
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Try
            Select Case context.Request.HttpMethod
                Case "POST"
                    Uploadfile(context)
                    Return

            Case Else
                context.Response.ClearHeaders()
                context.Response.StatusCode = 405
                Return
        End Select

    Catch ex As Exception
        Throw
    End Try

End Sub

Private Sub Uploadfile(ByVal context As HttpContext)

    Dim i As Integer
    Dim files As String()
    Dim savedFileName As String = String.Empty
    Dim js As New Script.Serialization.JavaScriptSerializer

    Try

        If context.Request.Files.Count >= 1 Then

            Dim maximumFileSize As Integer = ConfigurationManager.AppSettings("UploadFilesMaximumFileSize")

            context.Response.ContentType = "text/plain"
            For i = 0 To context.Request.Files.Count - 1
                Dim hpf As HttpPostedFile
                Dim FileName As String
                hpf = context.Request.Files.Item(i)

                If HttpContext.Current.Request.Browser.Browser.ToUpper = "IE" Then
                    files = hpf.FileName.Split(CChar("\\"))
                    FileName = files(files.Length - 1)
                Else
                    FileName = hpf.FileName
                End If


                If hpf.ContentLength >= 0 And (hpf.ContentLength <= maximumFileSize * 1000 Or maximumFileSize = 0) Then
                    Dim d As Date = Now
                    savedFileName = HttpRuntime.AppDomainAppPath & "CSVLoad\" + d.Year.ToString + d.DayOfYear.ToString + d.Hour.ToString + d.Minute.ToString + d.Second.ToString + d.Millisecond.ToString + ".csv"

                    hpf.SaveAs(savedFileName)

                Else

                End If
            Next

        End If

    Catch ex As Exception
        Throw
    End Try

End Sub

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return False
    End Get
End Property

End Class
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jquery ajax 和 asp.net 处理程序上传文件 的相关文章

  • jQuery(#id).val() 与 getElementById(#id).value

    我一直在搜索 但只能找到谈论其中之一的文章 哪一个更好 我正在制作一个小型网络应用程序 其中性能不是一个大问题 因为没有什么复杂的事情发生 我考虑过使用 jQueryval 函数 因为也许它解决了一些我不知道的不一致问题 但是getElem
  • global.asax 范围和生命周期澄清

    我需要在我当前正在进行的项目中实现多个应用程序级行为 有几件事我需要弄清楚 1 在哪里以及如何定义应用程序级变量 2 这些变量的生命周期是多长 或者更准确地说 在什么情况下它们会被丢弃 应用程序池回收 应用程序二进制文件从内存中删除并在下一
  • Anchor Cycler / 下拉菜单定期导入学校班级数据

    SO 我最近一直在研究一些 html javascript css 为我的学生创建一个在线表格来查看详细信息 分数和各种信息 但我遇到了困难 不确定如何做我正在尝试的事情去做 我将所有这些内容发布在一个线程中的原因是因为我认为其中几个可能会
  • 将 HTML 表格结构复制到剪贴板

    我只是在寻找这方面的建议 我一直在互联网上寻找可能的解决方案 了解如何将 HTML 表格结构及其文本复制到剪贴板 但到目前为止还没有那么幸运 我现在拥有的是一个包含数据的简单表格 用户需要在复制 粘贴时使用 Outlook 将其复制到电子邮
  • $(window).resize() 和打印预览模式

    我有一段非常简单的代码 可以在调整大小后刷新窗口 window resize function location reload 当我尝试在 Chrome 中打开打印预览模式 Ctrl P 时 它也会刷新它 有什么想法如何避免这种行为吗 要确
  • 从 javascript 调用 HttpHandler

    我有一个简单的页面 带有通过 JavaScript 调用 HttpHandler 的按钮 HttpHandler 获取大量文件并将它们添加到 zip 文件中 完成工作后 zip 文件将添加到 Response 中 此操作可能需要几分钟时间
  • Javascript - window.getCompulatedStyle 返回“auto”作为元素顶部和左侧属性

    在我的网页上 我有一些元素 div 子 div 按钮等 其位置是相对于它们所在的 div 以及彼此之间生成的 这会导致使用时的结果window getCompatedStyle the top and left属性不是数字值 而是简单的 a
  • 使用 jQuery 触发真实事件

    看来 jQuery 的trigger 仅运行与 jQuery 绑定的事件处理程序 我有一些使用本机浏览器事件绑定的模块 使用来自的代码https stackoverflow com a 2676527 https stackoverflow
  • 如何在 jquery 中创建“可重用”函数?

    我有这段代码效果很好 function displayVals var phonevals bphonesel val bphone val phonevals select change displayVals displayVals 我
  • 颜色变换器功能上的堆栈溢出错误

    我有两种颜色 红色 和 鲑鱼色 我需要动态创建面板以及面板背景颜色 这些颜色必须介于两种颜色之间 红色 public Color x y protected void Page Load object sender EventArgs e
  • 如何从 ASP.net 网站写入 OutputDebugString?

    我需要从网站上的代码输出一些调试信息 我怎样才能打电话OutputDebugString来自 ASP net 网站 并将其显示给运行 DbgView 的用户 Note 网站不支持System Diagnostics Trace TraceW
  • 根据每个选项的值或 ID 过滤选择框

    我想使用jquery来过滤表单中的所有选择框 例如 在第一个选择框中 如果我选择 仅显示1 我想过滤所有选择元素中的所有选择选项 以隐藏值不包含 1 的任何选项 仅应显示带有 1 的产品值 如果选择 Filter 选项 则所有选择框的默认值
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • 如何在不知道id的情况下从内页获取父iframe元素?

    让我们想象一下我有这样的东西 div div test html 是空页面 自定义hash属性始终具有不同的值 出于安全原因两个页面位于同一域 iframe 元素的数量和顺序是随机的 我的问
  • jQuery 解析 JSON

    当我尝试解析 JSON 验证的字符串时收到此错误 JSON parse 意外字符 当我删除需要转义的字符 style width 400px 时 它完美地工作 我缺少什么 在使用 parseJSON 之前是否有一种独特的方法来转义字符 va
  • 获取的属性名称值

    如何使用 jQuery 获取输入标记的属性名称值 请帮忙
  • ASP.NET Webform 中的异常处理

    在 ASP NET Webforms 中处理异常的首选方法是什么 你有Page Error您添加的方法 我认为 web config级别 并且当发生错误时整个站点将被重定向到该级别 这是否意味着您不应在 Web 表单应用程序中的任何位置使用
  • 仅在页面加载时执行 Javascript,而不是回发 (SharePoint)

    我正在尝试在 SharePoint 网站上的自定义页面上加载页面时执行一些 JavaScript 它使用当前用户填充人员选择器 问题是代码也在回发时执行 这是我不希望的 因为它会重置人员选择器的任何更改 我尝试过使用if IsPostBac
  • 是否可以在 ASP.NET Web API 和 SPA 中使用基于 cookie 的身份验证?

    我想创建基于 angularjs 前端和 ASP NET Web API 的 Web 应用程序 我需要创建安全 api 但我无法在将实施此 Web 应用程序的公司服务器上使用基于令牌的身份验证 是否可以对 SPA 和 ASP NET Web
  • 只允许在输入字段中输入数字

    我想要打开电话号码字段这个网站 http myfrugaltech com dev savoo register 只接受数字或数字 我无权编辑 HTML 代码 那么可以使用 jQuery 通过定位字段 ID 来完成此操作吗 如果可以的话 该

随机推荐