【ASP.NET】原生JavaScript加Asp.net实现多图片上传

本文介绍了如何使用HTML、CSS和Javascript结合ASP.NET实现多文件上传功能,包括前端的文件选择、进度条显示以及图片预览,以及后端的文件接收和删除。用户可以选择多个图片文件,实时显示上传进度,并在上传完成后显示图片,同时提供删除功能。
摘要由CSDN通过智能技术生成

记录一下,Javascript加asp.net实现多文件上传的方法。首先看一下要实现的功能,图片比文字描述更直观。
请添加图片描述

一、前台代码

前台代码代码分为三个部分,一是HTML代码,二是Style样式代码,三是Javascript代码。

1.html代码

在html中加入file控件,multiple设置为multiple,该控件主要是实现图片文件多选,并返回所选数据。
添加2个DIV标签,一个ID设置为“progressBar”,用来显示上传进度。该标签包含两个子DIV标签,一个图形显示进度,一个文字显示进度。另一个ID设置为“picBox”,用来显示上传完成后的图片。具体代码如下:

 <div>
            <input id="File1" type="file" multiple="multiple" onchange="UpLoad(this)"/><br />     
            <div id="progressBar">
                <div id="progressBarImg"></div>
                <div id="progressBarTxt">0%</div>
            </div>
            <div id="picBox"></div>
        </div>
2.Style样式代码

progressBar定义进度条样式;progressBarImg 定义图片进度显示样式;
progressBarTxt 定义文字进度显示样式;delbt定义删除按钮样式。

    <style>
        #progressBar{width:200px;border:1px solid #000000;height:30px;position:relative;}
        #progressBarImg {
            width:0%;background-color:#00ff21;height:30px;position:absolute;z-index:3;
        }
        #progressBarTxt {
            height:30px;position:absolute;z-index:4;text-align:center;
        }
        .delbt{position:absolute;border-radius:50%;width:25px;height:25px;background:#ff6a00;color:#ffffff;text-align:center;line-height:25px;cursor:pointer;}
        #picBox li{position:relative;list-style:none;padding:3px;margin:0px;height:100px;width:100px;display:block;float:left;}
        #picBox li img{position:absolute;height:100px;width:100px}
    </style>
3.Javascript代码

领域XMLHttpRequest向后台提交数据,后台实现图片文件保存删除功能,代码中标有详细解释,具体代码如下:

 <script type="text/javascript">
            var xhr;
            var progressBarTxt = document.getElementById("progressBarTxt");
            var progressBarImg = document.getElementById("progressBarImg");
            var picBox = document.getElementById("picBox");
            function UpLoad(obj) {
                progressBarTxt.innerHTML =  "0%";
                progressBarImg.style.width = "0%"
                var formData = new FormData(); // FormData 对象
                for (var i = 0; i < obj.files.length; i++) {
                    formData.append("files[]", obj.files[i]);
                }
                xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                xhr.onreadystatechange = function () {//设置回调函数,请求状态readyState=4准备就绪,服务器返回的状态码status=200接收成功
                    // if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) }
                }
                xhr.open("POST", "ImgUp.aspx", true);//post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
                xhr.upload.addEventListener("progress", function (e) {//监听上传进度
                    //if (e.lengthComputable) {
                    //    console.log("percent: ", (e.loaded / e.total) * 100 + "%");
                    //}
                }, false);
                xhr.onload = uploadComplete; //请求完成
                xhr.onerror = uploadFailed; //请求失败
                xhr.upload.onprogress = progressFunction;//上传进度调用方法实现
                xhr.upload.onloadstart = function () {//上传开始执行方法
                    startTime = new Date().getTime();   //设置上传开始时间
                    startSize = 0;//设置上传开始时,以上传的文件大小为0
                };
                xhr.send(formData);

            }
            function progressFunction(evt) {
                progressBarTxt.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";                
                progressBarImg.style.width = Math.round(evt.loaded / evt.total * 100) + "%"
            }
            function uploadComplete(evt) {
                var temstr = xhr.responseText.split(',');
                for (var i = 0; i < temstr.length; i++) {
                    var li = document.createElement("li");
                    li.innerHTML = "<img src='" + temstr[i] + "'/><span class='delbt' οnclick='deletePic(this,\"" + temstr[i] +"\")'>X</span>";
                    picBox.appendChild(li);
                }
                
            }
            function uploadFailed(evt) { alert("上传失败!"); }
            function deletePic(obj,picurl) {
                var xhrD = new XMLHttpRequest();
                xhrD.open("get", "ImgDelete.aspx?f=" + picurl, true);
                xhrD.onload = function () {
                    obj.parentElement.remove();
                }
                xhrD.onerror = function () { }
                xhrD.send();
            }
        </script>
4.整个前台代码

整个aspx文件代码如下:

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

<!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>
    <style>
        #progressBar{width:200px;border:1px solid #000000;height:30px;position:relative;}
        #progressBarImg {
            width:0%;background-color:#00ff21;height:30px;position:absolute;z-index:3;
        }
        #progressBarTxt {
            height:30px;position:absolute;z-index:4;text-align:center;
        }
        .delbt{position:absolute;border-radius:50%;width:25px;height:25px;background:#ff6a00;color:#ffffff;text-align:center;line-height:25px;cursor:pointer;}
        #picBox li{position:relative;list-style:none;padding:3px;margin:0px;height:100px;width:100px;display:block;float:left;}
        #picBox li img{position:absolute;height:100px;width:100px}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input id="File1" type="file" multiple="multiple" onchange="UpLoad(this)"/><br />     
            <div id="progressBar">
                <div id="progressBarImg"></div>
                <div id="progressBarTxt">0%</div>
            </div>
            <div id="picBox"></div>
        </div>
        <script type="text/javascript">
            var xhr;
            var progressBarTxt = document.getElementById("progressBarTxt");
            var progressBarImg = document.getElementById("progressBarImg");
            var picBox = document.getElementById("picBox");
            function UpLoad(obj) {
                progressBarTxt.innerHTML =  "0%";
                progressBarImg.style.width = "0%"
                var formData = new FormData(); // FormData 对象
                for (var i = 0; i < obj.files.length; i++) {
                    formData.append("files[]", obj.files[i]);
                }
                xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                xhr.onreadystatechange = function () {//设置回调函数,请求状态readyState=4准备就绪,服务器返回的状态码status=200接收成功
                    // if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) }
                }
                xhr.open("POST", "ImgUp.aspx", true);//post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
                xhr.upload.addEventListener("progress", function (e) {//监听上传进度
                    //if (e.lengthComputable) {
                    //    console.log("percent: ", (e.loaded / e.total) * 100 + "%");
                    //}
                }, false);
                xhr.onload = uploadComplete; //请求完成
                xhr.onerror = uploadFailed; //请求失败
                xhr.upload.onprogress = progressFunction;//上传进度调用方法实现
                xhr.upload.onloadstart = function () {//上传开始执行方法
                    startTime = new Date().getTime();   //设置上传开始时间
                    startSize = 0;//设置上传开始时,以上传的文件大小为0
                };
                xhr.send(formData);

            }
            function progressFunction(evt) {
                progressBarTxt.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";                
                progressBarImg.style.width = Math.round(evt.loaded / evt.total * 100) + "%"
            }
            function uploadComplete(evt) {
                var temstr = xhr.responseText.split(',');
                for (var i = 0; i < temstr.length; i++) {
                    var li = document.createElement("li");
                    li.innerHTML = "<img src='" + temstr[i] + "'/><span class='delbt' οnclick='deletePic(this,\"" + temstr[i] +"\")'>X</span>";
                    picBox.appendChild(li);
                }
                
            }
            function uploadFailed(evt) { alert("上传失败!"); }
            function deletePic(obj,picurl) {
                var xhrD = new XMLHttpRequest();
                xhrD.open("get", "ImgDelete.aspx?f=" + picurl, true);
                xhrD.onload = function () {
                    obj.parentElement.remove();
                }
                xhrD.onerror = function () { }
                xhrD.send();
            }
        </script>
    </form>
</body>
</html>

二、后台代码

后台包含两个页面一个是上传页面,一个是删除页面。

1.上传页面

上传页面名称为“ImgUp.aspx”,前台页面删除所有html代码,只保留一行如下:

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

后台主要代码如下:

 protected void Page_Load(object sender, EventArgs e)
        {
            string savePath = Server.MapPath(".");
            int piccount = HttpContext.Current.Request.Files.Count;
            ArrayList result = new ArrayList();
            if (piccount == 0)
            {
                Response.Write("1");
                Response.End();
            }
            for (int i = 0; i < piccount; i++)
            {
                HttpPostedFile file = HttpContext.Current.Request.Files[i];
                string filename = DateTime.Now.ToString("yyyyMMddmmssfff") + i.ToString() + System.IO.Path.GetExtension(file.FileName);
                file.SaveAs(savePath + "\\" + filename);
                result.Add(filename);
            }
            string rs = string.Join(",", (string[])result.ToArray(typeof(string)));
            Response.Write(rs);
        }
2.删除页面

上传页面名称为“ImgDelete.aspx”,前台页面删除所有html代码,只保留一行如下:

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

后台主要代码如下:

 protected void Page_Load(object sender, EventArgs e)
        {
            string filename = HttpContext.Current.Request["f"];
            string FileUrl = Server.MapPath(filename);
            if (File.Exists(FileUrl))
            {
                File.Delete(FileUrl);
            }
        }

三、代码

以上步骤我们图片上传的基本框架已实现,需要的朋友可以进行完善。代码下载请单击。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

游戏自学

生活不易,打赏随意

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值