jqueryformjs文件上傳

幾種js實現的動態多文件上傳

方式一：事先寫好多個input.在點擊時才顯示。也就是說上傳的最大個數是寫死了的。

html

p

ahref='#'onclick='javascript:viewnone(more1)'添加附件/a

divid='more1'style='display:none'

inputtype="file"name="attach1"size="50"javascript:viewnone(more2)

/span

/div

divid='more2'style='display:none'

inputtype="file"name="attach2"size="50"'

/div

/p

js

SCRIPTlanguage="javascript"

functionviewnone(e){

e.style.display=(e.style.display=="none")?"":"none";

}

/script

方式二:這種方式的動態多文件上傳是實現了的，很簡單的，不說廢話看code

html

inputtype="button"name="button"value="添加附件"onclick="addInput()"

inputtype="button"name="button"value="刪除附件"onclick="deleteInput()"

spanid="upload"/span

js

scripttype="text/javascript"

varattachname="attach";

vari=1;

functionaddInput(){

if(i0){

varattach=attachname+i;

if(createInput(attach))

i=i+1;

}

}

functiondeleteInput(){

if(i1){

i=i-1;

if(!removeInput())

i=i+1;

}

}

functioncreateInput(nm){

varaElement=document.createElement("input");

aElement.name=nm;

aElement.id=nm;

aElement.type="file";

aElement.size="50";

//aElement.value="thanks";

//aElement.onclick=Function("asdf()");

if(document.getElementById("upload").appendChild(aElement)==null)

returnfalse;

returntrue;

}

functionremoveInput(nm){

varaElement=document.getElementById("upload");

if(aElement.removeChild(aElement.lastChild)==null)

returnfalse;

returntrue;

}

/script

方式三：動態多文件上傳，只是在oFileInput.click();這個地方，這樣做就不能上傳這個文件了，因為發現它在上傳之時就把這個input中的文件置空了。很可能是為了安全著想吧！

另外還有一點就是說，click()只有在ie中才能正常運行。

雖說這種方式最終沒能實現上傳，但還是留下來參考，看看是否有人可以真正實現上傳。

html

Ahref="javascript:newUpload();"添加附件/A

TABLEwidth="100%"border="0"cellpadding="0"cellspacing="1"

TBODYid="fileList"/TBODY

/TABLE

DIVid="uploadFiles"style="display:block"/DIV

js

SCRIPTlanguage="javascript"

//---新建上傳

functionnewUpload(){

varoFileList=document.getElementById("fileList");

varfileCount=oFileList.childNodes.length+1;

varoFileInput=newFileInput("upfile_"+fileCount);

if(selectFile(oFileInput)){

addFile(oFileInput);

}

}

//----選擇文件

functionselectFile(oFileInput){

varoUploadFiles=document.getElementById("uploadFiles");

oUploadFiles.appendChild(oFileInput);

oFileInput.focus();

oFileInput.click();//不能這樣做，可能是為了安全著想吧！

varfileValue=oFileInput.value;

if(fileValue==""){

oUploadFiles.removeChild(oFileInput);

returnfalse;

}

else

returntrue;

}

//---新建一個文件顯示列表

functionaddFile(oFileInput){

varoFileList=document.getElementById("fileList");

varfileIndex=oFileList.childNodes.length+1;

varoTR=document.createElement("TR");

varoTD1=document.createElement("TD");

varoTD2=document.createElement("TD");

oTR.setAttribute("id","file_"+fileIndex);

oTR.setAttribute("bgcolor","#FFFFFF");

oTD1.setAttribute("width","6%");

oTD2.setAttribute("width","94%");

oTD2.setAttribute("align","left");

oTD2.innerText=oFileInput.value;

oTD1.innerHTML='Ahref="javascript:removeFile('+fileIndex+');"刪除/A'

oTR.appendChild(oTD1);

oTR.appendChild(oTD2);

oFileList.appendChild(oTR);

}

//---移除上傳的文件

functionremoveFile(fileIndex){

varoFileInput=document.getElementById("upfile_"+fileIndex);

varoTR=document.getElementById("file_"+fileIndex);

uploadFiles.removeChild(oFileInput);

fileList.removeChild(oTR);

}

//---創建一個fileinput對象並返回

functionnewFileInput(_name){

varoFileInput=document.createElement("INPUT");

oFileInput.type="file";

oFileInput.id=_name;

oFileInput.name=_name;

oFileInput.size="50";

//oFileInput.setAttribute("id",_name);

//oFileInput.setAttribute("name",_name);

//oFileInput.outerHTML='INPUTtype=fileid='+_name+'name='+_name+''

//alert(oFileInput.outerHTML);

returnoFileInput;

}

/SCRIPT

⑥ jqueryajax不能上傳圖片

不能上傳的原因可能是jquery插件使用不正確。

解決方法：

1、在head之間加入jquery引用

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

<scriptsrc="project/js/jquery.form.js" type="text/javascript"></script>

<scriptsrc="project/js/fileload.js" type="text/javascript"></script>

2、定義fileload.js，代碼如下：

function createHtml(obj) {
var htmstr = [];
htmstr.push( "<form id='_fileForm' enctype='multipart/form-data'>");
htmstr.push( "<table cellspacing="0" cellpadding="3" style="margin:0 auto; margin-top:20px;">");
htmstr.push( "<tr>");
htmstr.push( "<td class="tdt tdl">請選擇文件：</td>");
htmstr.push( "<td class="tdt tdl"><input id="loadcontrol" type="file" name="filepath" id="filepath" /></td>");
htmstr.push( "<td class="tdt tdl tdr"><input type="button" onclick="fileloadon()" value="上傳"/></td>");
htmstr.push( "</tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" colspan='3'style='text-align:center;'><div id="msg">&nbsp;</div></td> </tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" style=" vertical-align:middle;">圖片預覽：</td> <td class="tdt tdl tdr" colspan="2"><div style="text-align:center;"><img src="project/Images/NoPhoto.jpg"/></div></td> </tr>");
htmstr.push( "</table>")
htmstr.push( "</form>");
obj.html(htmstr.join(""));
}

function fileloadon() {
$("#msg").html("");
$("img").attr({ "src": "project/Images/processing.gif" });
$("#_fileForm").submit(function () {
$("#_fileForm").ajaxSubmit({
type: "post",
url: "project/help.aspx",
success: function (data1) {
var remsg = data1.split("|");
var name = remsg[1].split("/");
if (remsg[0] == "1") {
var type = name[4].substring(name[4].indexOf("."), name[4].length);
$("#msg").html("文件名：" + name[name.length - 1] + " --- " + remsg[2]);
switch (type) {
case ".jpg":
case ".jpeg":
case ".gif":
case ".bmp":
case ".png":
$("img").attr({ "src": remsg[1] });
break;
default:
$("img").attr({ "src": "project/Images/msg_ok.png" });
break;
}
} else {
$("#msg").html("文件上傳失敗：" + remsg[2]);
$("img").attr({ "src": "project/Images/msg_error.png" });
}
},
error: function (msg) {
alert("文件上傳失敗");
}
});
return false;
});
$("#_fileForm").submit();
}

3、服務端處理上傳。

protected void Page_Load(object sender, EventArgs e)
{
try
{
HttpPostedFile postFile = Request.Files[0];
//開始上傳
string _savedFileResult = UpLoadFile(postFile);
Response.Write(_savedFileResult);

}
catch(Exception ex)
{
Response.Write("0|error|上傳提交出錯");
}

}
public string UpLoadFile(HttpPostedFile str)
{
return UpLoadFile(str, "/UpLoadFile/");
}
public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
{
try
{
//獲取要保存的文件信息
string filerealname = httpFile.FileName;
//獲得文件擴展名
string fileNameExt = System.IO.Path.GetExtension(filerealname);
if (CheckFileExt(fileNameExt))
{
//檢查保存的路徑 是否有/結尾
if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";

//按日期歸類保存
string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
if (true)
{
toFilePath += datePath;
}

//物理完整路徑
string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;

//檢查是否有該路徑 沒有就創建
if (!System.IO.Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}

//得到伺服器文件保存路徑
string toFile = Server.MapPath("~" + toFilePath);
string f_file = getName(filerealname);
//將文件保存至伺服器
httpFile.SaveAs(toFile + f_file);
return "1|" + toFilePath + f_file + "|" + "文件上傳成功";
}
else
{
return "0|errorfile|" + "文件不合法";
}
}
catch (Exception e)
{
return "0|errorfile|" + "文件上傳失敗,錯誤原因：" + e.Message;
}
}

/// <summary>
/// 獲取文件名
/// </summary>
/// <param name="fileNamePath"></param>
/// <returns></returns>
private string getName(string fileNamePath)
{
string[] name = fileNamePath.Split('\');
return name[name.Length - 1];
}
/// <summary>
/// 檢查是否為合法的上傳文件
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;

}

public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("HHmmss"));
serial.Append(rd.Next(100, 999).ToString());
return serial.ToString();
}

4、運行defualt.aspx頁面以後顯示的效果是：

⑦ 使用jquery.form.js實現文件上傳及進度條前端代碼

ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。

需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。

去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]

將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });

[圖片上傳失敗...(image-3d6ae0-1548557865446)]

[圖片上傳失敗...(image-9f0adf-1548557865446)]

更多用法可以 參考官網