您的位置：首页 > 编程技术 > ASP.NET  >  Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现

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

 更新时间：2021年9月22日 10:15  点击：1890

兼容性想还不错：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()"/>        //上传图片，自动的，两个事件是为了保证所有浏览器都兼容。

[!--infotagslink--]

相关文章

  • php无刷新利用iframe实现页面无刷新上传文件(1/2)

    利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数，该参数为从客户端获取的$_files变量，返回重新命名后的文件名，如果上传失...2016-11-25

  • jQuery+PHP发布的内容进行无刷新分页（Fckeditor）

    这篇文章将使用jQuery，并结合PHP，将Fckeditor发布的内容进行分页，并且实现无刷新切换页面。 本文假设你是WEB开发人员，掌握了jQuery和PHP相关知识，并且熟知Fckeditor的配置和使用。...2015-10-23

  • PHP swfupload图片上传的实例代码

    PHP代码如下：复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04

  • 百度编辑器ueditor修改图片上传默认路径

    本案例非通用，仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03

  • php+ajax制作无刷新留言板

    本文就是和大家分享一款由php结合ajax实现的无刷新留言板，先给大家看一下最后的效果图：数据库连接代码如下： <&#63;php$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");mysql_select_db("d...2015-10-30

  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下...2016-01-08

  • Java实现将图片上传到webapp路径下 路径获取方式

    这篇文章主要介绍了Java实现将图片上传到webapp路径下 路径获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-11-12

  • c#生成高清缩略图的二个示例分享

    这篇文章主要介绍了c#生成高清缩略图的二个示例,需要的朋友可以参考下...2020-06-25

  • PHP批量生成图片缩略图(1/5)

    这款批量生成缩略图代码可以生成指定大小的小图哦，并且支持文件批量上传。 这款教程会用到php文件 view.php config.php funs.php index.php 功能: -------...2016-11-25

  • C#实现为一张大尺寸图片创建缩略图的方法

    这篇文章主要介绍了C#实现为一张大尺寸图片创建缩略图的方法,涉及C#创建缩略图的相关图片操作技巧,需要的朋友可以参考下...2020-06-25

  • php+js实现异步图片上传实例分享

    upload.php复制代码 代码如下:<?phpif(isset($_FILES["myfile"])){$ret = array();$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$upl...2014-06-07

  • php 上传文件并生成缩略图代码

    if( isset($_FILES['upImg']) ) { if( $userGroup[$loginArr['group']]['upload'] == 0 ) { echo '{"error":"您所在的用户组无权上传图片!"}'; } else...2016-11-25

  • ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    这篇文章主要给大家介绍了ASP.NET百度Ueditor编辑器1.4.3这个版本实现上传图片添加水印效果的相关资料，文中通过图文及示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。...2021-09-22

  • 利用Yii框架实现图片上传

    这篇文章主要介绍了Yii框架实现图片上传的方法,结合实例形式较为详细的分析了Yii框架实现图片上传功能的具体步骤与相关操作技巧,需要的朋友可以参考下 本文实例...2017-07-06

  • ajax+php 无刷新数据调用经典实例

    <!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/1...2016-11-25

  • php文件上传（强大文件图片上传类）

    这款文件上传实用代码，可以方便的上传你指定的文件或图片，同时也可以快速的限制上传图片文件类或大小。 /* * created on 2010-6-21 * * the class for image...2016-11-25

  • CentOS下编译安装nginx及配置缩略图插件的方法教程

    这篇文章主要给大家介绍了在CentOS系统下编译安装nginx及配置缩略图插件的方法教程，文中给出了详细的安装步骤，对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。...2017-07-06

  • php iframe 无刷新文件上传代码

    其它原理很简单，利用form表单的target属性和iframe来实现的，打开为iframe试就行了，返回就利用js判断php教程运行后返回的参数是不是成功 一、上传文件的一个php方法。...2016-11-25

  • iframe无刷新文件上传实现程序

    iframe无刷新文件上传其实就是在当前页面打开了上传程序的页面，有点像ajax局部刷新一个，只是我们把它放到了iframe页面中上传，同时我们把iframe页面给隐藏了。 一个...2016-11-25

  • php ajax实现无刷新检测用户名是否可用

    本文章简单的介绍了二种关于php ajax实现无刷新检测用户名是否可用，有我是利用了jquery的$.ajax来实例，有需要的朋友可以参考一下本实例。 前 言...2016-11-25