asp.net 无刷新上传图片jquery-form.js+一般处理程序

最新推荐文章于 2019-07-05 08:27:00 发布
最新推荐文章于 2019-07-05 08:27:00 发布
阅读量438 收藏
点赞数
分类专栏： 编程语言 ASP.Net 文章标签： Asp.net 无刷新上传图片 一般处理程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huoliwuxian5/article/details/79850247
版权

  • HTML：

包含母模板的页面

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebProject._Default" %>


<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <div>
            <div style="width: 250px; height: 250px; overflow: hidden;">
                <label for="uploadImg">
                    <input id="uploadImg" type="file" name="uploadImg" style="display: none" accept="image/png, image/gif, image/jpg, image/jpeg" />
                    <img id="image" style="width: 200px; height: 200px;border:solid 1px #000000" src="Images/img_123.jpg">
                </label>
                <span id="uploadFile" class="btn btn-success">上传</span>
            </div>
            <div id="progress">
                <div class="bar" style="width: 0%;"></div>
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-form.js"></script> <%--下载地址http://plugins.jquery.com/form/--%>
    <script>
        var imgUrl="";
        $(function () {
            $("#uploadFile").click(function () {
                var options = {
                    type: "POST",
                    url: 'UploadHandler.ashx',
                    success: showSuccess,
                    error:showError,
                    /*clearForm: true,*/  //成功提交后清除所有表单字段值
                };
                $('#ctl01').ajaxSubmit(options);//ctl01为Form的id
            })
        });
        function showSuccess() {
            var str = $("#uploadImg").val();
            $("#image").attr("src", getUrl(str));
            alert("上传成功!");
        }


        function showError() {
            alert("上传失败!");
        }


        function getUrl(s) {
            var strs = s.split('\\');
            var str = strs[strs.length - 1];
            return "/Upload/" + str;
        }
    </script>
</asp:Content>

普通页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="WebProject.Home" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="jumbotron">
            <div>
                <div style="width: 250px; height: 250px; overflow: hidden;">
                    <label for="uploadImg">
                        <input id="uploadImg" type="file" name="uploadImg" style="display: none" accept="image/png, image/gif, image/jpg, image/jpeg" />
                        <img id="image" style="width: 200px; height: 200px; border: solid 1px #000000" src="Images/img_123.jpg">
                    </label>
                    <span id="uploadFile" class="btn btn-success">上传</span>
                </div>
                <div id="progress">
                    <div class="bar" style="width: 0%;"></div>
                </div>
            </div>

        </div>

        <script src ="Scripts/jquery-1.11.3.min.js"></script>

        <script src="Scripts/jquery-form.js"></script>
        <%--下载地址http://plugins.jquery.com/form/--%>
        <script>
            var imgUrl = "";
            $(function () {
                $("#uploadFile").click(function () {
                    var options = {
                        type: "POST",
                        url: 'UploadHandler.ashx',
                        success: showSuccess,
                        error: showError,
                        /*clearForm: true,*/  //成功提交后清除所有表单字段值
                    };
                    $('#form1').ajaxSubmit(options);//form1为Form的id
                })
            });
            function showSuccess() {
                var str = $("#uploadImg").val();
                $("#image").attr("src", getUrl(str));
                alert("上传成功!");
            }


            function showError() {
                alert("上传失败!");
            }


            function getUrl(s) {
                var strs = s.split('\\');
                var str = strs[strs.length - 1];
                return "/Upload/" + str;
            }
        </script>
    </form>
</body>
</html>


  • 一般处理程序：

using System.IO;
using System.Web;


namespace WebProject
{
    /// <summary>
    /// UploadHandler 的摘要说明
    /// </summary>
    public class UploadHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            var file = context.Request.Files["uploadImg"];
            if(file != null)
            {
                var ext = Path.GetExtension(file.FileName);
                if (!(ext == ".jpeg" || ext == ".jpg" || ext == ".png" || ext == ".gif"))
                {
                    context.Response.Write("您上传的不是图片");
                    context.Response.End();
                }
                else
                {
                    string path = "/Upload/" + file.FileName;
                    file.SaveAs(context.Request.MapPath(path));
                }
            }
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}


炒鸡酒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp.net无刷新上传（带预览）
02-19
asp.net无刷新上传（带预览）,自己整理备用的，要下载别嫌贵，谢谢！
ASP.net批处理实现无刷新ajax和jquery.form的图片批量上传例子
06-22
在这个案例中，我们关注的是如何利用ASP.NET、批处理、无刷新AJAX以及jQuery Form插件来实现图片的批量上传功能。这个功能允许用户在不刷新整个页面的情况下，上传多张图片，提升用户体验。 批处理在ASP.NET中指的...
asp.net单步无刷新上传并回显图片
qq_28018731的博客
12-01 982
找了N多的办法，总算是解决了这个问题：首先添加两个js库 可以自己去网上下载&lt;script type="text/javascript" src="/js/jquery-1.8.3.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/js/jquery.form.js"&gt;&lt;/scri
asp.net mvc实现简单的无刷新上传图片
weixin_33979745的博客
08-24 132
步骤： 1，先引用脚本，ajaxfileupload.js和配套的jquery（注意：这里如果版本不同可能会出错） 2，客户端部分代码： <div class="jumbotron"> <h1>ASP.NET</h1> <input type="file" name="image" id="image" style="w...
asp.net无刷新上传图片并预览
源代码
07-15 1845
思路： 1.通过HTML控件file选择图片，然后通过form提交到一般处理程序。 注意：这里需要实现无刷新提交，无刷新提交在这里就不多说了，有很多中方法。如：通过iframe实现 2.一般处理程序接收到传来的file信息后，读取图片的信息，然后把信息存入数据流中（该数据流是用来预览图片用）。如：a.aspx?id=123的形式从内存流里读取图片 3.自己创建一个类，把内存流转换成字节
asp.net 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图
03-05 564
自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图如图:点击浏览,选择图片之后,右面显示图片 第一步:创建CtFileUpLoad.ascx复制代码 代码如下:Inherits="WebParts_CtFileUpLoad" %> " width="240px" height="22px" frameborder="0" scrolling="no">
asp.net 无刷新上传图片
07-05
ASP.NET无刷新上传图片是一种常见的前端与后端交互技术，主要通过jQuery库实现，它可以提供用户友好的体验，无需整个页面刷新即可完成图片上传并显示。这种方法极大地提升了用户体验，减少了服务器负载，因为只需要...
Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现
10-27
在Asp.net 2.0中实现无刷新图片上传并显示缩略图，可以通过结合JavaScript、jQuery和ASP.NET的一般处理程序（Generic Handler）来完成。以下是对这一过程的详细解释： 1. **引入必要的库**： 首先，我们需要引入...
asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
10-26
在ASP.NET中，为了提供更好的用户体验，我们常常需要实现无刷新分页功能，这可以通过结合Jquery、Ajax和Json技术来实现。这篇文章将详细介绍如何在ASP.NET中利用这些技术进行无刷新分页的实例。 首先，我们需要理解...
Asp.Net MVC中jquery.form附件上传例子
07-11
在Asp.Net MVC框架中，使用jQuery Form插件进行附件上传是一种常见的实践，它能够提供异步、非刷新的用户体验。jQuery Form插件是jQuery库的一个扩展，它使得表单提交变得更加灵活和易于控制，特别是在处理文件上传...
图片无刷新上传预览及数据库保存，经常用在用户个人信息页面，用户选择个人证件照片—预览—上传—保存数据库。
08-11
经常用在用户个人简历信息页面，用户选择个人证件照片—预览—上传—保存数据库。代码实现了整个过程，稍加改动及可用于项目。
jquery实现form表单提交后局部刷新页面的多种方法
weixin_30555515的博客
05-02 1236
最近做一个小项目，刚好需要用到搜索功能，实现搜索框内输入数据然后按回车或者点击“提交”，然后给后台数据库处理并返回数据给前端，在前端局部更新数据。 比如这样的：但是遇到了一个小问题，就是form表单下任意输入框输入完按回车提交，整个页面都会刷新，就算我用ajax从后台取出数据返回前端把页面更新了，整个页面还是会立马刷新成原来的样子。 所以问题又回到了最开始，就是form表单如何实现按回车提交数...
asp.net UpdatePanel实现无刷新上传图片
renxingxingge的专栏
08-16 484
<br />1）前台 <br />复制代码 代码如下:<br /><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ASP.NET[HTML控件]无组件无刷新的图片上传方式
weixin_30617561的博客
12-02 96
此技术的原理就是用FORM提交到IFRAME里面，由IFRAME 响应，响应的页面负责保存图片，然后返回到另外一个接受路径的页面，由接受页面调用第一个页面的函数，显示图片。由于是有IFRAME页面响应处理，所以页面不存在刷新的过程，而且使用的控件都是HTML控件，提高用户体验。 第一步，上传页面：黄色背景为注意的部分 <!DOCTYPEhtmlPUBLIC"-//W3C//...
【ASP.NET 进阶】无刷新上传图片之一：利用一般处理程序
weixin_34337381的博客
05-11 109
效果图：     源代码地址：https://github.com/YeXiaoChao/UploadThePic  
.Net之使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径...
dfj66154的博客
07-05 314
前言： 　　首先对于图片上传而言，在我们的项目开发中可以说出现的频率是相当的高的。这篇文章中，我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存，并返回保存的图片路径展示出图片，实现一个无刷新的异步图片上传的过程，当然这里我讲解的是单张图片的保存过程，对于多图片上传的话其实我们只需要在type='file'文本框中加上一个mu...
Net Web端无刷新上传图片
weixin_30838921的博客
07-18 92
自己搞的一个web端上传图片功能，思路是在页面放一个iframe，在src指向的页面实现上传并返回图片路径，缺点是会产生很多垃圾文件，待解决 大概代码如下： 用户控件代码，文件名UCUpload.ascx： 前台代码： <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UCUpload.ascx.cs" In...
Asp.Net无刷新上传并裁剪头像
dbow21397的博客
11-29 198
开发网站几乎都做过上传图片并截图，做个无刷新Asp.Net上传并截图示例 实现功能： 1.选择文件，自动上传并生成缩放图（上传带进度条），形成预览图 2.在预览区，实现鼠标拖拽截图区，截取图片（示例截图区按缩放图小边为截图正方形长度，可扩展为截图区可变形式） 3.点击保存，截取小图，保存截取图并显示在页面上，并删除原缩略图 示例截图： ----...
【ASP.NET编程知识】ASP.NET MVC异常处理模块详解.docx
最新发布
05-17
本文主要介绍了ASP.NET MVC异常处理模块的详细内容。异常处理作为系统的重要部分，能够使程序在发生错误时进行友好的提示，记录错误信息，而不破坏正常数据和系统运行。异常处理是一个横切点，无论是在哪个层级或是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值