iframe實現無重新整理上傳下載
最近我維護的網站在稽核時加了個上傳下載的功能,能上傳多個檔案(檔案很小、不超過3個、上傳時可以多選、且要有上傳進度),下載時有選擇的下載。頁面是用aspx做的,微軟自帶的只有單檔案上傳,於是乎想到flash。找了三個現成的,測試發現一個不相容IE9,另兩個都通過了,但發現有點山寨,flash是封裝好的,一個上面有廣告,一個是英文的,既是封裝的,我也不知道里面到底幹了什麼,也沒想去看As語言的語法。後來又找了個silverlight的,效果不錯,但新的問題又有了,flash到時大多數電腦都裝了的,但silverlight沒裝的人就多了去了,雖然給了下載的連結,但還是反映很差,時間又緊,無奈將功能裁減了點,上傳時不顯示實時進度,找了部落格園上的
任務是完成了,但明顯發現整合到我們專案中之後比較搓,我們專案用的Jquery,而這裡是純js(剛開始在IE9下還有Bug),我對js也不太熟悉,感覺這裡還有些問題,於是花了點時間研究了裡面的相關js語法,將基本的原理抽象出來,用Jquery寫了個上傳下載的例子,都是通過iframe實現的。
先說上傳:上傳本質是通過提交自帶的file控制元件,然後對a標籤做了點處理,首先a標籤做成圖片的,a標籤裡面是file控制元件,然後每次選擇檔案後將這個file控制元件隱藏,新建一個file控制元件,這樣就實現了點選一個圖示上傳多個檔案。下面給出最基本的實現,至於實時顯示選擇的檔案、已經上傳的檔案以及其他取消的功能就看各人的發揮了。
下面貼出程式碼:Form窗體的程式碼
<form id="uploadForm" action="FileUpLoad.ashx"> <table> <tr> <td> <a href="javascript:void(0);" class="files" id="idFile"></a> </td> <td> <input id="idBtnupload" type="button" value="開始上傳" /> </td> </tr> </table> </form>
js的程式碼:
$(document).ready(function () {
//註冊按鈕的點選事件
$("#idBtnupload").click(btnUpLoad_onclick);
CreateFrame();
Init();
})
///建立iframe
function CreateFrame() {
var FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
var oframe = $('<iframe name=' + FrameName + '>');
//修改樣式是css,修改屬性是attr
oframe.css("display", "none");
//在內部的前面加節點
$('body').prepend(oframe);
//設定form屬性,關鍵是target要指向iframe
$("#uploadForm").attr("target", FrameName);
$("#uploadForm").attr("method", "post");
//注意ie的form沒有enctype屬性,要用encoding
$("#uploadForm").attr("encoding", "multipart/form-data");
}
///上傳
function btnUpLoad_onclick() {
$("#uploadForm").submit();
}
///初始化時新建一個file型別文字框
function Init() {
var fileJquery = $("<input type='file'>").attr("name", "Test").attr("title", "Jquery");
//這是運用js的onchange屬性賦值的(不知道用Jquery怎麼實現,用Jquery繫結方法沒能實現)
fileJquery[0].onchange = function () { return OperateAndNew(fileJquery[0]); };
fileJquery.appendTo("#idFile");
}
///每當新增一個附件時執行
function OperateAndNew(o) {
if (o.value != "") {
o.style.display = "none"
Init();
}
}
///上傳完成後提示訊息
function Finish(msg) {
alert(msg);
}
後臺處理程式的程式碼:
using System.Web;
using System.IO;
namespace UpLoadAndDown1021.上傳檔案
{
/// <summary>
/// FileUpLoad 的摘要說明
/// </summary>
public class FileUpLoad : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int iTotal = context.Request.Files.Count;
for (int i = 0; i < iTotal; i++)
{
HttpPostedFile file = context.Request.Files[i];
if (file.ContentLength > 0 || !string.IsNullOrEmpty(file.FileName))
{
//儲存檔案
file.SaveAs(System.Web.HttpContext.Current.Server.MapPath("./UpLoadFile/" + Path.GetFileName(file.FileName)));
}
}
context.Response.Write("<script>window.parent.Finish('上傳檔案成功!');</script>");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
其次是下載:一開始用的a標籤,直接點選下載,後來發現文字或者圖片的話就不行,會直接在瀏覽器中開啟;後來用Ajax非同步呼叫時,但總有問題,我希望直接通知瀏覽器下載,而不是返回前臺;於是也用iframe實現,本質上就是建立了一個iframe,然後將其指向下載的方法。
前臺Form的程式碼:
<form id="idForm" action="">
下載檔案:<input type="text" id="AnnexName" value="絕密資料共享.txt" />
<br />
檔案全路徑:<input type="text" style="width: 500px" id="FullName" value="D:\pfeEXE\UpLoadAndDown1021\Demo.DownLoad\TestFile\絕密資料.txt" />
<br />
<input type="button" id="btnDownLoad" name="Test" value="DownLoad" />
</form>
js程式碼:
$(document).ready(function () {
$("#btnDownLoad").click(btnDownLoad_onclick);
})
function CreateFrame() {
var AnnexName = $("#AnnexName").val();
var FullName = $("#FullName").val();
var FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
var oframe = $('<iframe name=' + FrameName + '>');
//修改樣式是css,修改屬性是attr
oframe.css("display", "none");
oframe.attr("src", "DownLoad.aspx?opType=" + "DownLoadAnnex" + "&AnnexName=" + AnnexName + "&FullName=" + FullName);
//在內部的前面加節點
$('body').prepend(oframe);
}
function btnDownLoad_onclick() {
CreateFrame();
}
後臺處理程式的程式碼:
using System;
using System.IO;
namespace UpLoadAndDown1021.Demo.DownLoad
{
public partial class DownLoad : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["opType"] == "DownLoadAnnex")
{
///完整路徑名(包括檔名)
string fulleName = Request["FullName"];
///下載儲存的檔名
string dispalyName = Request["AnnexName"];
DownLoadFile(fulleName, dispalyName);
}
}
/// <summary>
/// 下載檔案
/// </summary>
/// <param name="FullName">待下載的全路徑</param>
/// <param name="DisPalyName">顯示的名稱</param>
private void DownLoadFile(string FullName, string DisPalyName)
{
if (File.Exists(FullName))
{
FileInfo file = new FileInfo(FullName);
Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8"); //解決中文亂碼
Response.AddHeader("Content-Disposition", "attachment; filename=" + Server.UrlEncode(DisPalyName)); //解決中文檔名亂碼
Response.AddHeader("Content-length", file.Length.ToString());
Response.ContentType = "appliction/octet-stream";
Response.WriteFile(file.FullName);
Response.End();
}
else
{
//可以提示檔案不存在或已丟失
}
}
}
}
至此完成,只是思想,實現的業務還很少,其他還有實時檔案上傳狀態、進度等。專案原始碼。歡迎閱讀、討論、轉載,轉載請保留原文地址。
相關推薦
iframe實現無重新整理上傳下載
最近我維護的網站在稽核時加了個上傳下載的功能,能上傳多個檔案(檔案很小、不超過3個、上傳時可以多選、且要有上傳進度),下載時有選擇的下載。頁面是用aspx做的,微軟自帶的只有單檔案上傳,於是乎想到flash。找了三個現成的,測試發現一個不相容IE9,另兩個都
form+iframe實現無重新整理上傳檔案
原理: 利用form的target屬性,將form的action在iframe中開啟,並接收返回結果,實現仿ajax的頁面無重新整理檔案上傳。 正是action在iframe中開啟,所以,頁面才會無重
iframe實現無重新整理上傳檔案
其實在ajax出現之前,web應用也可以是無重新整理的,那時大多通過IFrame來做到這一點。當然Ajax出現之後,人們一窩蜂地投奔Ajax 的陣營了,iFrame 就乏人問津了。但是用iFrame來實現無重新整理上傳檔案確實一個很好的選擇。 [html] vi
如何使用ajax實現無重新整理上傳
詳細程式碼如下 9.upload.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Cont
利用js實現無重新整理上傳頭像(或檔案)並顯示進度條
無重新整理上傳原理:現在我們利用新技術FormData表單資料物件可以實現快速收集表單資訊,普通表單域 和 上傳檔案域 均可以收集,再結合ajax就可以實現無重新整理上傳。 那麼怎樣顯示進度條呢?原來ajax物件有upload成員,該成員也是物件,構造器是XMLHttpR
基於iframe的無重新整理上傳檔案,並返回上傳結果
<!-- 將target配置成一個隱藏的iframe --> <form id= "form1" enctype ="multipart/form-data" action= "/F
jQuery+php+ajax實現無重新整理上傳檔案功能
jQuery+php+ajax實現無重新整理上傳檔案功能,還帶有上傳進度條動畫效果,支援圖片、視訊等大檔案上傳。 js程式碼
form+iframe+file 頁面無重新整理上傳檔案並獲取返回值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><but
基於jQuery的ajax系列之用FormData實現頁面無重新整理上傳
接著上一篇ajax系列之用jQuery的ajax方法向伺服器發出get和post請求寫,這篇主要寫如何利用ajax和FormData實現頁面無重新整理的檔案上傳效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData介面。
Javascript與asp.net 實現Ajax多檔案無重新整理上傳
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w
ajaxfileupload.js外掛結合一般處理檔案實現Ajax無重新整理上傳
先上幾張圖更直觀展示一下要實現的功能,本功能主要通過Jquery ajaxfileupload.js外掛結合ajaxUpFile.ashx一般應用程式處理檔案實現Ajax無重新整理上傳功能,結合NPOI2.0實現資料讀取。這個功能在實際工作種經常用到,希望能
JSCH實現文件上傳下載至sftp服務器
jsch pen except down 不存在 conn turn input enc 文件服務器采用FreeSSHd,文件服務器配置就不細說了。 直接上代碼,該代碼可以直接使用。 import com.jcraft.jsch.*; import jav
C#實踐問題:如何實現檔案的上傳下載等
一種學習的方法:把握住關鍵點、重點、難點、易錯點等,以點帶面。 使用C#編寫一個簡單的檔案上傳和下載功能很簡單,只要掌握了一些關鍵點和易錯點就足夠在很短的時間內設計一個實用的文件管理頁面。 檔案上傳 前端實現: 第一部分:在前臺aspx內嵌入一條上
無重新整理上傳圖片的幾種方式
背景知識: 無重新整理上傳圖片主要還是為了在提交表單之前進行圖片的預覽。使用者體驗相對於提交表單跳轉顯示圖片的方式總還是要好一些的。 本文主要介紹三種無重新整理上傳圖片的方式 1.使用iframe子頁面的形式達到無重新整理上傳圖片的功能。首先設定一個隱藏的i
easyPoi實現Excel檔案上傳下載
easyPoi 官方API http://easypoi.mydoc.io/ pom引入 <dependency> <groupId>cn.afterturn</groupId> <
檔案上傳的動作不能太俗,必須頁面無重新整理上傳
常規操作上傳檔案 1 <form action="xxx.action" method="post" enctype="multipart/form-data"> 2 <input type="file" name="userfile" multiple><br&
搭建apache2伺服器實現檔案的上傳下載
作業系統:ubuntu14.04 如何搭建檔案伺服器,通過網頁下載檔案? 1、安裝 apt-getinstall apache2 2、修改網頁伺服器的配置檔案 vim /etc/apache2/sites-available/000-default.confDocum
模仿Ajax的動態無重新整理上傳檔案
使用到的jar檔案:commons-fileupload-1.3.jar,commons-io-2.4.jar jsp頁面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
ajaxFileUpload.js 無重新整理上傳圖片,支援多個引數同時上傳,支援 ie6-ie10
ajaxFileUpload 無重新整理上傳的原理: 在頁面動態建立 form 表單和 ifram 貞,設定 form 表單提交的目標為 ifram 貞, 將檔案域和要 post 的引數動態寫入 form 表單中,然後提交 from 表單。 通過 window.attach
定時執行Linux shell指令碼實現SFTP定時上傳下載檔案
之所以寫這篇文章,是因為網上很多有關文章亂轉載,crontab 命令的語法都是錯的,都直接轉了,雖然很簡單,但也會浪費時間啊,尤其是對於第一次寫的同學來說。轉入正題一:定時任務(大部分文章出錯的就是這個部分)1.執行命令:crontab -e2.按 i 編輯檔案,新增命令如下