一、建立Default.aspx页面

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title>ajax图片上传</title>
  6. <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  7. <script src="js/jquery.form.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. function upload(){
  10. var path = document.getElementById("File1").value;
  11. var img = document.getElementById("img1");
  12. if($.trim(path)==""){
  13. alert("请选择要上传的文件");
  14. return;
  15. }
  16. $("#form1").ajaxSubmit({
  17. success: function (str) {
  18. if(str!=null && str!="undefined"){
  19. if (str == "1") {alert("上传成功");document.getElementById("img1").src="data:images/logo.jpg?"+new Date();/*上传后刷新图片*/}
  20. else if(str=="2"){alert("只能上传jpg格式的图片");}
  21. else if(str=="3"){alert("图片不能大于1M");}
  22. else if(str=="4"){alert("请选择要上传的文件");}
  23. else {alert('操作失败！');}
  24. }
  25. else alert('操作失败！');
  26. },
  27. error: function (error) {alert(error);},
  28. url:'Handler.ashx', /*设置post提交到的页面*/
  29. type: "post", /*设置表单以post方法提交*/
  30. dataType: "text" /*设置返回值类型为文本*/
  31. });
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <form id="form1" runat="server">
  37. <input id="File1" name="File1" type="file" />
  38. <input id="iptUp" type="button" value="上传Logo"  onclick="upload()"/>
  39. <img id="img1" alt="网站Logo" src="data:images/weblogo.jpg" />
  40. </form>
  41. </body>
  42. </html>

二、新建一个一般处理文件Handler.ashx

    1. <%@ WebHandler Language="C#" Class="Handler" %>
    2. using System;
    3. using System.Web;
    4. public class Handler : IHttpHandler {
    5. public void ProcessRequest (HttpContext context) {
    6. HttpPostedFile _upfile = context.Request.Files["File1"];
    7. if (_upfile == null)
    8. {
    9. ResponseWriteEnd(context, "4");//请选择要上传的文件
    10. }
    11. else
    12. {
    13. string fileName = _upfile.FileName;/*获取文件名： C:\Documents and Settings\Administrator\桌面\123.jpg*/
    14. string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();/*获取后缀名并转为小写： jpg*/
    15. int bytes = _upfile.ContentLength;//获取文件的字节大小
    16. if (suffix != "jpg")
    17. ResponseWriteEnd(context, "2"); //只能上传JPG格式图片
    18. if (bytes > 1024 * 1024)
    19. ResponseWriteEnd(context, "3"); //图片不能大于1M
    20. _upfile.SaveAs(HttpContext.Current.Server.MapPath("~/images/logo.jpg"));//保存图片
    21. ResponseWriteEnd(context, "1"); //上传成功
    22. }
    23. }
    24. private void ResponseWriteEnd(HttpContext context, string msg)
    25. {
    26. context.Response.Write(msg);
    27. context.Response.End();
    28. }
    29. public bool IsReusable {
    30. get {
    31. return false;
    32. }
    33. }
    34. }

项目结构图

ajax图片上传(asp.net +jquery+ashx)的更多相关文章

  1. 一个伪ajax图片上传代码的例子

    一个伪ajax图片上传实现代码. 复制代码代码如下: <?php  if($_FILES){  ?>  <script>  window.parent.ajaxUploadPi ...

  2. 两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错

    遇到了两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错 首先第一个: 在做一个用ajax图片上传的功能中,php报了这样一个错误:File upload error - u ...

  3. ajax图片上传及FastDFS入门案例.

    今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jqu ...

  4. CKEditor不借助CKFinder实现图片上传（.net版 ashx实现）

    参考博客:http://blog.csdn.net/mydwr/article/details/8669594 本人版本:4.4.6 打开文件:ckeditor/plugins/image/dialo ...

  5. ajax图片上传功能

    一.应用场景 当用户需要上传图片当做自己的头像时,预览的时候该图片需要在本地预览,不应该通过网络从服务器上取到之后预览 二.实现方法 1.方法1: 注释:给上传文件的input标签绑定一个change ...

  6. 用Ajax图片上传、预览、修改图片

    首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...

  7. ajax图片上传

    使用ajaxfileupload.js插件 html代码: <p> <label>ajax上传</label> <input type="file& ...

  8. ajax图片上传，单个按钮实现选择图片和上传

    //图片原件上传功能 function gosubmit(file, key) { var formData = new FormData($("#inputForm")[0]); ...

  9. 基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader

    (function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(thi ...

随机推荐

  1. [window] 使用Pyhton轻便好用的spyder IDE进行代码分析时如何指定相关的配置文件

    spyder 使用pylint这个第三方库进行代码检查,其实pylint使用的代码规范默认也是pep8,不过该库还有 其它用途,在这里我专门写写在代码分析时,如何指定配置文件 一般来说,使用spyde ...

  2. asp.net (web)选择文件夹 上传文件

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  3. c++复习——临考前的女娲补天 >=.<

    一些零零散散的知识点... 1.抽象类只能作为其他类的基类,不能建立对象,但抽象类的派生类如果给出纯虚函数的函数体,这个派生类仍然是一个抽象类.//这个好理解 懂了 2.抽象类不能作为参数类型,函数的 ...

  4. TestingWhiz社区版2013版下载地址

    TestingWhiz社区版 https://sourceforge.net/projects/testingwhiz-community-edition/ https://sourceforge.n ...

  5. python3下multiprocessing、threading和gevent性能对比----暨进程池、线程池和协程池性能对比

    python3下multiprocessing.threading和gevent性能对比----暨进程池.线程池和协程池性能对比   标签: python3 / 线程池 / multiprocessi ...

  6. java虚拟机规范-运行时数据区

    前言 java虚拟机是java跨平台的基石,本文的描述以jdk7.0为准,其他版本可能会有一些微调. 引用 java虚拟机规范 数据类型 java总共有两种数据类型:基本类型和引用类型.java虚拟机 ...

  7. 如何修改linux 用户登录后默认目录

    1.linux用户登录后默认目录是在/etc/passwd文件设置的.如下图所示,一共显示了四行数据,其中第一行的/root即为root用户登录后的默认目录,第二行daemon用户的默认目录是/usr ...

  8. 006-spring-data-elasticsearch 3.0.0.0使用【四】-spring-data之Elasticsearch Repositories

    续 二.Elasticsearch Repositories 2.1.简介 2.1.1.Spring命名空间 Spring Data Elasticsearch模块包含一个允许定义存储库bean的自定 ...

  9. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_14-ArrayList集合的常用方法和循环

    常用的方法记下来 刚创建好,什么都不放的 add添加方法肯定是成功的. 加了这么多的值都没有用返回值,输出的结果可以看到都是添加成功的 获取索引值 ALT+回车键,推荐使用本地变量去接收 这样左边就会 ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第5节 线程池_1_线程池的概念和原理

    线程的底层原理 集合有很多种,线程池的集合用LinkedList最好