Jquery ajaxsubmit 异步上传图片无刷新

最新推荐文章于 2021-08-05 12:41:27 发布

yusilove

最新推荐文章于 2021-08-05 12:41:27 发布

阅读量961

点赞数

分类专栏： asp ajax 文章标签： ajax异步上传图片 asp ajax 上传图片 ajax上传图片

asp ajax 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何利用jQuery和ASP.NET技术实现异步上传图片的功能，包括前端引入jQuery和jQuery.form.js，后端处理程序的编写，以及关键代码示例。该教程对于希望提高网站交互性和用户体验的开发者具有实用价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先前有做异步上传，但是好像都没成功，看到网友的一篇博客，先记录下来，以后看能不能用到

异步上传图片的步骤如下：

1.引用 jquery js 框架（这东西的好处无需多论）后再引用 “jquery.form.js”。

2.建立一般处理程序 ashx。

核心代码如下：

html:

    1

   <

   asp:Content ID

   =

   "

   Content3

   "

    ContentPlaceHolderID

   =

   "

   Head

   "

    runat

   =

   "

   server

   "

   >



    2



   <

   script src

   =

   "

   <%=Url.Content(

   "

   ~/

   Scripts

   /

   jquery

   -

   1.4

   .

   1

   .js

   "

   ) %>

   "

    type

   =

   "

   text/javascript

   "

   ></

   script

   >



    3



   <

   script src

   =

   "

   <%=Url.Content(

   "

   ~/

   Scripts

   /

   jquery.form.js

   "

   ) %>

   "

    type

   =

   "

   text/javascript

   "

   ></

   script

   >



    4



   <

   script type

   =

   "

   text/javascript

   "

   >



    5

    $(function () {

    6



   //

   上传图片



    7



    $(

   "

   #btnUpload

   "

   ).click(function () {

    8



   if

    ($(

   "

   #flUpload

   "

   ).val()

   ==



   ""

   ) {

    9

    alert(

   "

   请选择一个图片文件，再点击上传。

   "

   );

   10



   return

   ;

   11

    }

   12

    $(

   '

   #UpLoadForm

   '

   ).ajaxSubmit({

   13

    success: function (html, status) {

   14

    var result

   =

    html.replace(

   "

   <pre>

   "

   ,

   ""

   );

   15

    result

   =

    result.replace(

   "

   </pre>

   "

   ,

   ""

   );

   16

    $(

   "

   #image

   "

   ).attr(

   '

   src

   '

   , result);

   17

    alert(result);

   18

    }

   19

    });

   20

    });

   21

    });

ashx 如下：

    1

   namespace

    TestMvc.Utility

    2

   {

    3



   ///



   <summary>



    4



   ///

    Summary description for PicUploadHander

    5



   ///



   </summary>



    6





   public



   class

    PicUploadHander : IHttpHandler

    7

    {

    8



    9



   public



   void

    ProcessRequest(HttpContext context)

   10

    {

   11

    context.Response.ContentType

   =



   "

   text/plain

   "

   ;

   12



   //

   验证上传的权限TODO



   13



   string

    _fileNamePath

   =



   ""

   ;

   14



   try



   15

    {

   16

    _fileNamePath

   =

    context.Request.Files[

   0

   ].FileName;

   17



   //

   开始上传



   18



   string

    _savedFileResult

   =

    UpLoadImage(_fileNamePath, context);

   19

    context.Response.Write(_savedFileResult);

   20

    }

   21



   catch



   22

    {

   23

    context.Response.Write(

   "

   上传提交出错

   "

   );

   24

    }

   25

    }

注：整个上传使用ajax 异步数据，同时jquery回调出上传成功后图片在服务器上的相对路径。总的来说此方式相对传统的上传图片方式要强一些。