• 技术文章 >web前端 >js教程

    asp.net+jquery.form做出图片异步上传功能

    php中世界最好的语言php中世界最好的语言2018-04-23 17:12:23原创1155
    这次给大家带来asp.net+jquery.form做出图片异步上传功能,asp.net+jquery.form做出图片异步上传功能的注意事项有哪些,下面就是实战案例,一起来看一下。

    首先我们需要做准备工作

    jquery 点击此处本站下载。

    jquery.form.js 点击此处本站下载。

    页面JqueryFormTest.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits="JqueryFormTest" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
     <title></title>
     <script src="JS/jquery-1.8.0.js" type="text/javascript"></script>
     <script src="JS/jquery.form.js" type="text/javascript"></script>
     <script type="text/javascript">
      $(function () {
       $("#btn").click(function () {
        $("#fm1").ajaxSubmit({
         url: "img.ashx",
         type: "post",
         success: function (data) {
          alert(data);
          //IE显示图片会默认加上<PRE></PRE>,着必须要把去除掉才能在低版本ie显示
          data = data.replace("<PRE>", "").replace("</PRE>", "");
          $("#pimg").append("<img src='" + data + "' width='200px' height='200px'/>");
          //清空file控件里面的值
          var file = $("#btnfile");
          file.after(file.clone().val(""));
          file.remove();
         }
        });
       });
      })
     </script>
    </head>
    <body>
     <form id="fm1" method="post">
     <!--method="post"不能省略,在ie里面必不可少-->
     <input type="file" id="btnfile" name="btnfile" value="提交" />
     <br />
     <input type="button" id="btn" value="上传" />
     </form>
     <p id="pimg">
     </p>
    </body>
    </html>

    img.ashx:

    <%@ WebHandler Language="C#" Class="img" %>
    using System;
    using System.Web;
    public class img : IHttpHandler {
     public void ProcessRequest (HttpContext context) {
      context.Response.ContentType = "text/plain";
      //获取上传的文件的对象
      HttpPostedFile img = context.Request.Files["btnfile"];
      //获取上传文件的名称
      string s = img.FileName;
      //截取获得上传文件的名称(ie上传会把绝对路径也连带上,这里只得到文件的名称)
      string str = s.Substring(s.LastIndexOf("\\") + 1);
      string path = "~/upload/"+ str;
      //保存文件
      img.SaveAs(context.Server.MapPath(path));
      //HttpRuntime.AppDomainAppVirtualPath主要是获取应用程序虚拟路径名称,因为响应给页面时不会自动添加而导致无法显示图片
      context.Response.Write(HttpRuntime.AppDomainAppVirtualPath + path.Substring(1));//path.Substring(1)用来去除第一个~字符
     }
     public bool IsReusable {
      get {
       return false;
      }
     }
    }

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    jQuery中$(function() {})使用案例

    Jquery获取radio选中值方法详解

    以上就是asp.net+jquery.form做出图片异步上传功能的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇:jquery删除table选中行 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• JavaScript进阶学习之初识类、函数进阶、如何改变this指向• 浅析JavaScript中的程序控制流和函数• win环境下node版本怎么切换?(升级降级)• 一起聊聊JavaScript中的声明提升• 实例JavaScript之实现数值的动态变化
    1/1

    PHP中文网