Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现

兼容性想还不错：FF，CH，IE，猎豹，都是可以实现的。如果看到回显。当然就是成功了。

经历了好几天的不停的钻牛角尖，终于将这个二货弄出来了。真是煞费苦心啊。但是做出来的瞬间还是蛮开心的。

第一步：我们需要加载几个JS库。
jquery库。
jquery.form.js库。

下载这两个库，并引用到页面中。

以下为页面中 JS 代码：


代码如下:

function upload() {
            var options = {
                type: "POST",                            //当然这个是传送方式
                url: '../Include/Files.ashx',        //一般处理程序的路径
                success: function (msg) {        //返回的参数
                    $("#server_img").attr("src", msg);            //回显图片。
                }
            };
            // 将options传给ajaxForm
            $('#aspnetForm').ajaxSubmit(options);
 }

第二步：一般处理程序内的代码


代码如下:

public void ProcessRequest(HttpContext context)
    {
        HttpFileCollection files = context.Request.Files;              // From中获取文件对象
        if (files.Count > 0)
        {
             string path = "";                                                            //路径字符串
            Random rnd = new Random();
            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];                                        //得到文件对象
                if (file.ContentLength > 0)
                {
                    string fileName = file.FileName;
                    string extension = Path.GetExtension(fileName);
                    int num = rnd.Next(5000, 10000);                            //文件名称
                    path = "../../UserFiles/temp/" + num.ToString() + extension;
                    file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));        //保存文件。
                }
            }
            context.Response.Write(path);            //返回文件存储后的路径，用于回显。
        }
    }

第三步：html或者aspx中的代码。
    以下两句代码随便插入html或者aspx中的任意位置。想来都是可以实现的。


代码如下:

<img id="server_img" width="360px" style="border: 1px solid #ccc; padding: 2px;"   title="" alt="" />   //用于回显图片
    <asp:FileUpload ID="Up_load" runat="server" onchange="upload()"  ontextchange="upload()"/>        //上传图片，自动的，两个事件是为了保证所有浏览器都兼容。

赞 (0)

相关推荐

  • asp.net 30分钟掌握无刷新 Repeater

    asp.net 30分钟掌握无刷新 Repeater

    示例代码下载: /201109/yuanma/JQueryElementTest.rar本文中所包含的内容如下: * 准备 * 主要功能 * 绑定字段 * 绑定属性 * 基本设置 * 设置分页 * 设置字段 * 设置调用的服务端方法 * 请求/返回数据的格式 * 填充/搜索 * 更新 * 删除 * 新建 * 行状态说明 * 排序状态说明 * 设置模板 * ItemTemplate * UpdatedItemTemplate/InsertedItemTemplate * RemovedItemTe

  • Asp.net实现无刷新调用后台实体类数据并以Json格式返回

    新建一般处理程序 public class Temp { public int Index { get; set; } public string Description { get; set; } public string ImagePath { get; set; } public DateTime MyDate { get; set; } } //数据源 List<Temp> listTemp = new List<Temp>() { new Temp(){ Index=1

  • asp.net+jquery ajax无刷新登录的实现方法

    因为工作需要研究了一下 js的ajax,下面是成果.主要是三部分:一.js部分 友情提示注意js部分中的 $("#btn_login")中的return false:这个可以阻止回转服务器不然还是会刷新 复制代码 代码如下: $(document).ready(function () {    $("#btn_login").click(function () {        postlogin();        return false;    });});

  • Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • asp.net中MVC借助Iframe实现无刷新上传文件实例

    本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法.分享给大家供大家参考.具体实现方法如下: html: 复制代码 代码如下: <div id="uploadwindow" style="display: none;">     <form action="/ShopActivitys/ImportActivityItems" id="form1" name="form1&

  • asp.net 简便无刷新文件上传系统

    ps:flash实现的效果是好得多,但这不是我研究的范围,也没什么可比性. 兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.0 效果预览 文件上传 选择文件 重命名 操作 状态 重置 选择文件 重置 选择文件 重置 选择文件 ps:由于需要后台,要测试系统请下载实例测试. ps2:在完整实例文件中,还有一个文件属性查看实例. 程序说明 [upload] 程序中最重要的方法就是upload了,调用它就可以进行无刷新上传.

  • asp.net jquery无刷新分页插件(jquery.pagination.js)

    asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

  • asp.net Ajax之无刷新评论介绍

    首先还是建一个DoComments.aspx页面和一个DealComments.ashx页面(代码基本上都有注释,如果没写注释,请先看前几篇!).Docomments.aspx页面中的代码为: 复制代码 代码如下: <head runat="server"> <title></title> <script type="text/javascript"> var objXmlHttp = null; function C

  • asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码

    首先贴上Jquery的ajax: 复制代码 代码如下: $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type: 'POST', contentType: 'application/json;charset=utf-8', dataType: 'json', data: '{ PpareId:"' + varlue + '"}', success: function (data) { var dataObj = eval("(&q

  • asp.net点击 查看更多 实现无刷新加载的实现代码

    asp.net点击 查看更多 实现无刷新加载的实现代码

    页面页面的js代码如下, 复制代码 代码如下: <script type="text/javascript"> $(function () { function init(count, start) { $.ajax({ type: "GET", dataType: "json", url: "Handler/Handler.ashx", data: { action: "GetMoreNews"

  • asp.net中Timer无刷新定时器的实现方法

    本文实例讲述了asp.net中Timer无刷新定时器的实现方法.Timer控件要实现无刷新,得用到ajax技术,这里使用VS2008自带的ajax技术.    首先得添加一个ScriptManager控件,然后再添加一个UpdatePanel用于存放Timer控件内容的,就可以实现无刷新了.下面是详细的内容: 一.前台代码如下: <form id="form1" runat="server"> <asp:ScriptManager ID="

  • asp.net使用AJAX实现无刷新分页

    查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页. 在ASP.NET 中有很多数据展现的控件,比如Repeater.GridView,用的最多的GridView,它同时也自带了分页的功能.但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的.而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的. AJAX的分页可以很好的解决这些问题. 数

  • asp.net ajax实现无刷新验证码

    1.首先是在后台验证码的aspx文件的Page_Load中的事件代码: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; namespace 学生在线考试系统 { public partial class

随机推荐