html5 file调用一般处理程序上传图片

最新推荐文章于 2022-06-16 15:24:42 发布

曹振华

最新推荐文章于 2022-06-16 15:24:42 发布

阅读量3.2k

点赞数 1

分类专栏： html5 文章标签： c# html5 一般处理程序上传图片

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        //选择图片,c#默认请求大小4M。  
        //如果需求需要大于4M，修改httpRuntime下的maxRequestLength  
        //单位为：K   
        function fileSelected() {
            var files = document.getElementById('fileToUpload').files;
            if (files.length > 0) {
                var fileInfo = '';
                for (var i = 0; i < files.length; i++) {
                    fileInfo += 'Name: ' + files[i].name + '<br/>';
                    fileInfo += 'Size: ' + files[i].size + '<br/>';
                    fileInfo += 'Type: ' + files[i].type + '<br/>';
                }
                document.getElementById('fileInfo').innerHTML = fileInfo;
            }
        }
        function uploadFile() {//上传图片  
            var files = document.getElementById('fileToUpload').files;
            if (files.length > 0) {
                var fd = new FormData();
                for (var i = 0; i < files.length; i++) {
                    fd.append("fileToUpload", files[i]);
                }
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", uploadProgress, false);
                xhr.addEventListener("load", uploadComplete, false);
                xhr.addEventListener("error", uploadFailed, false);
                xhr.addEventListener("abort", uploadCanceled, false);
                xhr.open("POST", "Upload.ashx?filename=UploadImage");
                xhr.send(fd);
            } else {
                alert('请选择上传的图片！');
            }
        }
        function uploadProgress(evt) {//上传中  
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            }
            else {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
        }
        function uploadComplete(evt) {//上传完成  
            /* This event is raised when the server send back a response */
            alert(evt.target.responseText);
        }

        function uploadFailed(evt) {//上传失败  
            alert("There was an error attempting to upload the file.");
        }
        function uploadCanceled(evt) {//上传被取消  
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" οnchange="fileSelected();" />
            <input type="button" οnclick="uploadFile()" value="Upload Image" />
            <div id="fileInfo"></div>
            <div id="progressNumber"></div>
        </div>
    </form>
</body>
</html>

一般处理程序代码

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace WebApplication2
{
    /// <summary>
    /// Upload 的摘要说明
    /// </summary>
    public class Upload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string msg = string.Empty;
            try
            {
                string filename = context.Request.QueryString["filename"];
                string dir = context.Server.MapPath("~/" + filename);
                if (!Directory.Exists(dir))//文件夹不存在    
                {
                    Directory.CreateDirectory(dir);//创建文件夹    
                }
                 HttpFileCollection files = context.Request.Files;
                 if (files.Count > 0)
                 {
                     for (int i = 0; i < files.Count;i++ )
                     {
                         string path = System.IO.Path.Combine(dir, System.IO.Path.GetFileName(files[i].FileName));
                         files[i].SaveAs(path);
                     }
                 }
                 msg = "true";
            }
            catch (Exception ex)
            {
                msg="false";
            }  
            context.Response.ContentType = "text/plain";
            context.Response.Write(msg);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

曹振华

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5 file调用一般处理程序上传图片

前台代码 //选择图片,c#默认请求大小4M。 //如果需求需要大于4M，修改httpRuntime下的maxRequestLength //单位为：K function fileSelected() { var files = document.get
复制链接

扫一扫