1. 程式人生 > >javaScript如何實現上傳檔案

javaScript如何實現上傳檔案

在進行頁面編寫的時候,我們有時會遇到需要上傳檔案,下面我們就來總結一下,如何來上傳檔案

1.上傳單個檔案

上傳單個檔案比較簡單,直接通過設定input元素的屬性type=“file”即可實現


執行之後,點選選擇檔案,就可以選擇任意位置的單個檔案。

2.上傳資料夾

實現上傳資料夾稍微複雜一點

html程式碼:

<formmethod="post" enctype="multipart/form-data" action="/upload/aaa">

    <input type="file"id="files" name="files[]" webkitdirectorymozdirectory>

    <input type="submit"value="確認上傳資料夾">

</form>

jq程式碼:

$(function () {

           $("#files").on("change",function (e) {

               $.each(this.files,function (k,v) {

                   console.log(v.type+"="+v.webkitRelativePath);

               });

           });

        })

執行之後,就可以實現上傳檔案夾了。


相關推薦

javaScript如何實現檔案

在進行頁面編寫的時候,我們有時會遇到需要上傳檔案,下面我們就來總結一下,如何來上傳檔案 1.上傳單個檔案 上傳單個檔案比較簡單,直接通過設定input元素的屬性type=“file”即可實現 執行之後,點選選擇檔案,就可以選擇任意位置的單個檔案。 2.上傳資料夾 實現上

bbs專案富文字編輯器實現檔案到media目錄

media目錄是在project的settings中設定的,static目錄是django自己使用的靜態檔案的上傳目錄,media目錄是使用者自定義上傳檔案的目錄 # Django使用者上傳的檔案都放在media目錄下 MEDIA_URL = "/media/" MEDIA_ROOT = os.pat

使用第三方元件實現檔案

使用第三方元件實現上傳檔案功能需要在專案lib下目錄匯入兩個Jar包(commons-fileupload 和  commons-io) commons-io下載地址:http://commons.apache.org/proper/commons-io/download_i

tornado+vue實現檔案

要用tornado+vue寫一個後臺管理系統,記錄一下遇到檔案上傳時候的步驟: 1.Form表單裡的程式碼:(這裡是使用的餓了麼表單元件) <el-form-item label="頭像"> <el-upload

win2008 r2 搭建FTP服務實現檔案

如何使用FTP傳輸檔案到伺服器 Win10開啟FTP與配置(完整無錯版)   一、控制面板》程式》開啟或關閉windows功能     二、安裝IIS服務   三、開始》管理工具》計算機管理

Windows 的java客戶端實現檔案到Linux的Hadoop叢集(注意ip和埠是否一致)

我這幾天一直在學大資料,處於入門階段,然後老師的視訊中教學有用windows的java客戶端上傳檔案到Linux的Hadoop叢集, 但是這邊出BUG了一直上傳不上去,執行程式後一直沒反應。。。。弄了幾天(雖然這幾天在做前端專案~~~) 然後問群裡的大佬,他們說應該是ip和埠

基於springMVC+AJAX+bootstraptable實現檔案和客戶端分頁

1 首先看一下上傳表格程式碼,主要程式碼如下: <form method="post" enctype="multipart/form-data" id="orderform"> <div class="col-md-6 col-sm-12"&

使用form表單同時實現檔案和提交文字資料

使用form表單同時實現上傳檔案和提交文字資料,此示例中在後臺將檔案上傳到阿里的oss儲存伺服器中 申請oss相關賬號: endpoint = "http://oss-cn-qingdao.aliyuncs.com"; accessKeyId = "key"; accessKeySecret = "secr

vue axios 實現檔案

1 新建一個用來上傳檔案的axios,不同普通請求後臺的axios,因為上傳檔案不能手動設定請求頭      var uploadAxios = axios.create({}),       Vue.prototype.$uploadAxios = uploadAxio

ajax實現檔案和form表單檔案的區別

在使用form表單的時候,一旦點選提交觸發submit事件,一般會使得頁面跳轉,頁面間的跳轉等行為的控制權往往在後端,後端會控制頁面的跳轉及資料傳遞,但是在某些時候不希望頁面跳轉,或者說想要將控制權放在前端,通過js來操作頁面的跳轉或者資料變化。 一般這種非同步的操作,我們

javascript實現和下載

使用easyui進行檔案上傳 HTML程式碼 <form id ="uploadform" style="display:inline-flex;">

用struts2實現檔案和轉化檔案為html

action public class shangchuanAction extends ActionSupport{ public File some; public String someFileName; public File getSome() { return so

windows中虛擬機器和windows之間互通性,並實現檔案

一 測試連結是否ping通 筆記文件見百度網盤:大資料資料/windows與上安裝虛擬機器....doc; 因為安裝虛擬機器的時候,windows和vmare選擇的通訊方式為NAT方式,現在測試是否能ping通 虛擬機器的ip:192.168.59.128 Windo

使用thinkphp實現檔案(uploadify外掛)

語言:php 框架:thinkphp3.2.3 上傳外掛:uploadify 1、在html頁面或者模板中引入CSS和JS <link rel="stylesheet" type="text

js方法實現--檔案功能js實現

unction createUploadForm(fileElementId, data, curFileList) { var id = new Date().getTime(); var formId = 'jUploadForm' + id; //給form新增一個獨一

利用 Javascript 實現圖片並向伺服器獲取圖片路徑後顯示的 demo

       由於某些特殊原因,有時需要從服務端請求到圖片路徑,需要給該介面傳遞對應圖片的base64 dataURL,並且有時需要將其上傳圖片的型別統一為 jpeg 格式時,可採用以下方式。 HTM

vue 點選圖示實現檔案效果

查了好多網友的文章,有兩種方法 第一種是用相對定位、絕對位、overflow 配合opacity 實現<span class="fileinput-button "> <i class="fa fa-folder-open-o" aria-hidden="

Nodejs學習筆記(八)--- Node.js + Express 實現檔案功能(felixge/node-formidable)

目錄 前言   前面講了一個構建網站的示例,這次在此基礎上再說說web的常規功能----檔案上傳,示例以一個上傳圖片的功能為例子   上傳功能命名用formidable實現,示例很簡單!   PS:最近比較忙,距上一次更新已經比較久了^_^! formidable簡介   nodejs

WinSCP自動化指令碼實現檔案

下一個bat指令碼,在bat指令碼中執行winscp程式 D:\WinSCP\WinSCP.exe /console /command "option batch abort" "option confirm off" "open scp://root:[email

Java 實現檔案服務端程式碼(一)

服務端:通過Servlet + fileupload 等實現 jar:commons-fileupload-1.3.1.jar,commons-io-2.4.jar 客戶端上傳見:Java 上傳檔案客戶端程式碼(二) package com.http.servlet;