ajax与一般处理程序上传图片

2024-05-30 17:18

本文主要是介绍ajax与一般处理程序上传图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前台html代码及juqery代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ajax上传文件.WebForm1" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>ajax图片上传</title>
    <script src="js/jquery-1.4.2.min.js"></script>
    <script src="js/jquery-form.js"></script>


    <script type="text/javascript">
        $(function () {
            $('#iptUp').click(function () {
                  var path = document.getElementById("File1").value;
                var img = document.getElementById("img1");
                if ($.trim(path) == "") {
                    alert("请选择要上传的文件");
                    return;
                } else {
               $('#form1').ajaxSubmit({
                url: "Handler1.ashx", /*设置post提交到的页面*/
                type: "post", /*设置表单以post方法提交*/
                dataType: "text", /*设置返回值类型为文本*/
                success: function (str) {
                    if (str != null && str != "undefined") {
                        if (str == "1") { alert("上传成功"); document.getElementById("img1").src = "images/logo.jpg?" + new Date();/*上传后刷新图片*/ }
                        else if (str == "2") { alert("只能上传jpg格式的图片"); }
                        else if (str == "3") { alert("图片不能大于1M"); }
                        else if (str == "4") { alert("请选择要上传的文件"); }
                        else { alert('操作失败!'); }
                    }
                    else alert('操作失败!');
                },
                error: function (error) { alert("操作失败!"); }


            });




                }
            });




            


        });




    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input id="File1" name="File1" type="file" />
        <input id="iptUp" type="button" value="上传Logo" />
        <img id="img1" alt="网站Logo" src="images/weblogo.jpg" />
    </form>
</body>
</html>


一般处理程序代码:

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Script.Serialization;


namespace ajax上传文件
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {


        public void ProcessRequest(HttpContext context)
        {
            HttpPostedFile _upfile = context.Request.Files["File1"];
            if (_upfile == null)
            {
                ResponseWriteEnd(context, "4");//请选择要上传的文件  
            }
            else
            {
                string fileName = _upfile.FileName;/*获取文件名: C:\Documents and Settings\Administrator\桌面\123.jpg*/
                string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();/*获取后缀名并转为小写: jpg*/
                int bytes = _upfile.ContentLength;//获取文件的字节大小  


                if (suffix != "jpg")
                    ResponseWriteEnd(context, "2"); //只能上传JPG格式图片  
                if (bytes > 1024 * 1024)
                    ResponseWriteEnd(context, "3"); //图片不能大于1M  


                _upfile.SaveAs(HttpContext.Current.Server.MapPath("")+"\\images\\" + fileName);//保存图片  
                ResponseWriteEnd(context, "1"); //上传成功  
            }
        }


        private void ResponseWriteEnd(HttpContext context, string msg)
        {
            context.Response.Write(msg);
            context.Response.End();
        }  


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }












    }
}

这篇关于ajax与一般处理程序上传图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1016595

相关文章

input的accept属性让文件上传安全高效

《input的accept属性让文件上传安全高效》文章介绍了HTML的input文件上传`accept`属性在文件上传校验中的重要性和优势,通过使用`accept`属性,可以减少前端JavaScrip... 目录前言那个悄悄毁掉你上传体验的“常见写法”改变一切的 html 小特性:accept真正的魔法:让

Java使用Spire.Doc for Java实现Word自动化插入图片

《Java使用Spire.DocforJava实现Word自动化插入图片》在日常工作中,Word文档是不可或缺的工具,而图片作为信息传达的重要载体,其在文档中的插入与布局显得尤为关键,下面我们就来... 目录1. Spire.Doc for Java库介绍与安装2. 使用特定的环绕方式插入图片3. 在指定位

Python多任务爬虫实现爬取图片和GDP数据

《Python多任务爬虫实现爬取图片和GDP数据》本文主要介绍了基于FastAPI开发Web站点的方法,包括搭建Web服务器、处理图片资源、实现多任务爬虫和数据可视化,同时,还简要介绍了Python爬... 目录一. 基于FastAPI之Web站点开发1. 基于FastAPI搭建Web服务器2. Web服务

java对接Pinata上传文件到IPFS全过程

《java对接Pinata上传文件到IPFS全过程》本文详细介绍了如何使用PinataAPI将文件上传到IPFS网络,首先登录Pinata官网并生成JWT令牌,然后在项目中导入OkHttp依赖并编写代... 目录1.登录2.生成令牌3.导入依赖4.编写代码5.调用接口调试China编程代码总结Pinata调用AP

利用Python将PDF文件转换为PNG图片的代码示例

《利用Python将PDF文件转换为PNG图片的代码示例》在日常工作和开发中,我们经常需要处理各种文档格式,PDF作为一种通用且跨平台的文档格式,被广泛应用于合同、报告、电子书等场景,然而,有时我们需... 目录引言为什么选择 python 进行 PDF 转 PNG?Spire.PDF for Python

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

Android实现图片浏览功能的示例详解(附带源码)

《Android实现图片浏览功能的示例详解(附带源码)》在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

Python一次性将指定版本所有包上传PyPI镜像解决方案

《Python一次性将指定版本所有包上传PyPI镜像解决方案》本文主要介绍了一个安全、完整、可离线部署的解决方案,用于一次性准备指定Python版本的所有包,然后导出到内网环境,感兴趣的小伙伴可以跟随... 目录为什么需要这个方案完整解决方案1. 项目目录结构2. 创建智能下载脚本3. 创建包清单生成脚本4

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot?二、环境准备与部署2.1 安装 RustF