一、建立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. jsp格工化日期

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> .当后台传过来的时 ...

  2. Activiti7入门(五)

    1 创建流程 首先选中存放图形的目录(本次我们选择 resources 下的 bpmn 目录),点击菜单: New-BpmnFile,如下图所示: 起完名字 holiday 后(默认扩展名为 bpmn ...

  3. Node 资源

    Node.js 首页 最新的 Node.js 核心文档 Node.js 博客 Node.js 职位公告板 Node.js 包管理器(npm)的首页

  4. Han Xin and His Troops

    Han Xin and His Troops 中国剩余定理 JAVA板子 /*中国剩余定理,根据公式需要求取大数的逆元*/ import java.math.BigInteger; import ja ...

  5. [design pattern](1) Strategy

    引言 最近,在学习设计模式相关的知识.本博客主要想讲一讲策略模式,这也是我学习的第一个模式.写下这篇博客,主要想记录下个人的一点理解,也是想通过写博客的方式来加深对与Strategy的一点理解.以下的 ...

  6. Python List 列表list()方法

    Python基础数据类型之一列表list,在python中作用很强在,列表List可以包含不同类型的数据对像,同时它是一个有序的变量集合,每个变量可以存储一个地址.所有序列能用到的标准操作方法,列表也 ...

  7. java虚拟机规范-加载、链接与初始化

    前言 java虚拟机是java跨平台的基石,本文的描述以jdk7.0为准,其他版本可能会有一些微调.java代码本身并不能为jvm识别,实际上在jvm中的表现形式为Class对象,一个java类从字节 ...

  8. React-Native 之 GD （十一）加载更多功能完善 及 跳转详情页

    1.加载更多功能完善 GDHome.js /** * 首页 */ import React, { Component } from 'react'; import { StyleSheet, Text ...

  9. UART协议详解

    UART(Universal Asynchronous Receiver/Transmitter)是一种异步全双工串行通信协议,由Tx和Rx两根数据线组成,因为没有参考时钟信号,所以通信的双方必须约定 ...

  10. sqlalchemy批量添加数据－数据源是json（小算法）

    需求: 想要写1个增加case的接口 问题: sqlalchemy添加case的方式,只能是1条数据1条数据的插入,像这样: ro2 = Role(name='user') db.session.ad ...