Asp.net + js 异步上传文件的例子 - 使用iframe实现

最新推荐文章于 2024-04-19 19:24:46 发布

yumaojun

最新推荐文章于 2024-04-19 19:24:46 发布

阅读量1.2k

点赞数

分类专栏： C#.NET 文章标签： iframe asp.net upload function server file

本文链接：https://blog.csdn.net/yumaojun/article/details/6866944

版权

C#.NET 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="FileInput.aspx.cs" Inherits="WebApp.FileInput" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>File upload ajax - Demo</title>

    <script type="text/javascript" src="js/jquery.js">js/jquery.js</script>

    <script type="text/javascript">
    $(function(){
    
        $("#Button1").click(function(){
            upload();
            return false;
        });
    });
    
    function upload()
    {
        var of = $("#uploadFile");
        if(of.val()=="") {
            alert("Input file for upload!");
            return;
        }
        
        // 添加到表格
        var tr = $("#fileInfo tr:eq(0)").clone().get(0);
        tr.cells[0].innerText = $("#fileInfo tr").length;
        tr.cells[1].innerText = of.val();
        tr.cells[2].innerHTML = "<a href='javascript:void(0)' οnclick='return remove()'>Delete</a>"; 
        $(tr).appendTo("#fileInfo");
        
        $("#fileContent").empty();
        $("#fileContent").append(of);
        $("#filePanel").append(of.clone());
        
        //修改属性
        of.attr('id','');
        of.attr('name','uploadFile');

        $('#uploadForm').submit();
    }
    
    function remove()
    {
        if(!confirm("Delete now?"))
        {
            return false;
        }
        
        // 此处做服务器端删除/ajax
        
        // 界面用JS删除
        var elm = event.srcElement || event.target;
        $(elm.parentNode.parentNode).remove();
        
        return false;
    }
    </script>

</head>
<body>
    <iframe name="hiddenIframe" frameborder="0" border="0" style="display: none; width: 0px;
        height: 0px;"></iframe>
    <form id="uploadForm" action="FileInput.aspx" method="post" enctype="multipart/form-data"
        target="hiddenIframe" style="display: none; width: 0px; height: 0px;">
        <span id="fileContent"></span>
    </form>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Input File:"></asp:Label>
            <span id="filePanel">
                <asp:FileUpload ID="uploadFile" runat="server" /></span>
            <asp:Button ID="Button1" runat="server" Text="Upload File" />
            <br />
            <br />
            <table id="fileInfo" style="border: 1px solid black; width: 400px;">
                <tr>
                    <td>
                        Row No.
                    </td>
                    <td>
                        File Info……</td>
                    <td>
                        Operate</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace WebApp
{
    public partial class FileInput : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Files.Count > 0)
            {
                HttpPostedFile file = Request.Files["uploadFile"];
                if (null==file)
                {
                    return;
                }

                //Random rand = new Random();
                string filename = /*DateTime.Now.Ticks.ToString() + rand.Next() + */System.IO.Path.GetFileName(file.FileName);
                string fullFilename = Request.MapPath("~/Files/") + filename;

                file.SaveAs(fullFilename);
            }
        }
    }
}

yumaojun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Asp.net + js 异步上传文件的例子 - 使用iframe实现

File upload ajax - Demo js/jquery.js $(function(){ $("#Button1").click(function(){ upload();
复制链接

扫一扫