1. 程式人生 > >html5檔案(圖片,音訊,視訊)上傳

html5檔案(圖片,音訊,視訊)上傳

html程式碼片段:

<input type="file" id="fileInput"/>

js:

 var fileInput = document.querySelector('#fileInput');

    fileInput.onchange = function () {
        var file = this.files[0];
        if (!/audio\/\w+/.test(file.type)) {/*可以把autio改成其他檔案型別 比如 image*/
              alert("只能選擇音訊檔案")
            return false;
        }
        console.log(file.type)/*檔案型別*/
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
             var audioBlob=convertBase64UrlToBlob(reader.result,file.type)
            /*request("audio",audioBlob)這裡是我的ajax請求*/
        };
    };
    
     function convertBase64UrlToBlob(urlData,type){   /*轉成二進位制物件*/
    var bytes=window.atob(urlData.split(',')[1]);      
    var ab = new ArrayBuffer(bytes.length);  
    var ia = new Uint8Array(ab);  
    for (var i = 0; i < bytes.length; i++) {  
        ia[i] = bytes.charCodeAt(i);  
    }  
    return new Blob( [ab] , {type : type});  
    

function request(type,Blob){

 var formData = new FormData();/*建立formData物件*/

  formData.append("cover_img", Blob);
   $.ajax({
            url:"檔案上傳地址",
            type:"POST",
            processData: false,
            contentType: false,
            data: formData,
            dataType: 'json',
            success: function (data) {

                  }

})

}

相關推薦

html5檔案圖片音訊視訊

html程式碼片段:<input type="file" id="fileInput"/>js: var fileInput = document.querySelector('#fileInput');    fileInput.onchange = funct

阿里雲 javascript檔案圖片視訊、壓縮包等檔案到 物件儲存 OSS 返回檔案圖片音訊視訊等URL路徑

目的:前端上傳檔案(圖片、視訊、音訊等)到阿里雲伺服器裡面,並且獲得上傳檔案的URL路徑 前提:首先要買一個阿里雲伺服器,自己百度不會; 第一步:登入阿里雲賬號,點選管理控制檯-->物件儲存 OSS 第二步:新建儲存空間(圖一、圖二) (圖一) (圖二

iOS獲取網頁資料圖片、文字、視訊

獲取網頁上所有圖片、獲取所有html、獲取網頁title、獲取網頁內容文字。。。 .h 檔案 程式碼: //網頁 //NSString *strPath = [NSString stringWithFormat:@"http://www.bai

基於C/C++的讀取資料夾下所有檔案圖片、文件等的程式碼

<pre name="code" class="cpp">#include <iostream> #include <string> #include <vector> #include <io.h> #inclu

django2.0 中如何顯示靜態檔案圖片、css 和js

參考了幾個部落格,然後總結了一下,有誤請指正。 這是我相關檔案的路徑 1.在settings.py 檔案的末尾加上加上以下程式碼: STATIC_URL = '/static/' HERE = os.path.dirname(os.path.abspath(

Wireshark抓包儲存檔案圖片視訊音訊

1、首先選擇一個圖片的分組 如圖的9801 就是JPG 2、對下面的窗口裡面選中JPEG File Interchange Format 右鍵選擇 匯出分組位元組流 3、檔案輸入XXX.jpg,注意儲存格式選擇All Files 所有檔案 ok!其他檔案格式步驟雷同

Android 媒體庫圖片音訊視訊檔案的查詢

轉載:Android 媒體庫圖片,音訊,視訊,檔案的查詢 首先,我們該怎樣獲取查詢這些資訊?   其實android中其實系統已經給我們提供了一個數據庫,裡面包含了sd卡中所有檔案的資訊(大小、位置、建立時間等)。      多媒體資料庫存放的位置:   - data/data

form表單提交帶有圖片音訊視訊這樣的檔案

應該寫上  enctype="multipart/form-data"   <form class="form-horizontal" role="form" action="{{url('admin/article/store')}}" enctype="mu

實時去除瀏覽器快取的檔案音訊視訊圖片

程式碼: <!DOCTYPE HTML> <html> <body> <audio src= url +"/i/horse.ogg?ran=" + Math.random() controls="controls"> You

ueditor單圖片simpleupload設置其 width:100%height:auto。以適應各種屏幕大小顯示

適應 () 技術 width png 屏幕大小 bsp 代碼 操作 打開ueditor.all.js,按下圖操作(修改後註意清緩存): 附上待搜索的關鍵字:function callback() 附上代碼   loader.setAttribute(‘width‘

關於瀏覽器快取問題圖片更換後頁面仍優先讀取快取

因為部分需求(跟換頭像,切換輪播圖等等)改變圖片或者本地上傳新圖片,會導致圖片快取問題,從而達不到預期效果,還是載入原圖片查找了一些資料,總結出2個步驟: 1.在圖片的路徑的後面拼接 ‘?內容’ 解決,具體如下 (1)在圖片src路徑後面加上時間戳,使瀏覽

PostgreSQL生態、原理、應用案例、開發與管理實踐 - 南京站 最全資料下載PPT+回顧視訊

活動介紹 PostgreSQL發展非常的迅猛,覆蓋OLTP,OLAP,NoSQL,搜尋,時空,流,圖,影象等應用場景,往企業級全棧資料庫的方向發展。PostgreSQL的應用場景豐富,在穩定性、效能、可用性、可靠性、容災、安全性、擴充套件性等方面不亞於商用資料庫Oracle,常被業界稱為“開源界的Oracl

Html5學習筆記四—播放音訊視訊檔案

1,  載入音訊檔案: Key word :<audio src=”路徑” controls=”controls”> Src是音訊路徑 ,controls屬性用來提供播放,暫停,音量控制 下面是一個簡單程式碼進行播放本地音訊 <!DOCTYPE HTML&

關於富文字編輯器ueditorjsp版檔案到阿里雲OSS的簡單例項適合新手

       本人菜鳥一枚,最近公司有需求要用到富文字編輯器,我選擇的是百度的ueditor富文字編輯器,閒話不多說,進入正題:一:ueditor的下載及安裝以及OSS的下載及引入我就不詳細說了,這裡說下要注意的幾點:        1,ueditor下載地址:點選開啟連結

頻道管理頁面高仿頭條等新聞app騰訊視訊

頻道管理頁面(高仿頭條等新聞app) 1,頻道名稱資料是儲存在Sqlite資料庫中 DragGrid 繼承 GridView 我的頻道頁面 點選刪除頻道,長按拖拽順序 3 。 OtherGridView 繼承 GridView 更多頻道 點選新增頻道 更多頻道

利用Freemarker生成doc檔案包含list迴圈ifelse判斷合併單元格嵌入表格單元格字數過多報錯等

1、利用office等軟體開啟doc文件,另存為word2003xml形式的檔案。 2、修改xml中的需要動態生成的值,Freemarker變數為${data}格式的,修改完改成ftl字尾,複製到載入

Android 使用intent開啟手機自帶應用播放視訊音訊文件還有開啟應用市場

1 開啟手機上的視訊播放器播放視訊 String url = "http://192.168.0.1/1.mp4" Intent intent = new Intent(); intent.setAc

ajaxFileUpload 檔案/圖片引數解決第二次無法問題

html: <script charset="utf-8" src="js/ajaxfileupload.js"></script> <input style="display:;" type="file" id="userfile" o

js頭像圖片如何立即展示?圖片詳解。

我個人覺得,這個js(頭像,圖片)上傳,立即展示,對做web前端的童鞋來說,還是非常有用的。 主要的js    previewImage.js: function PreviewImage(obj, imgPreviewId, divPreviewId) { var a

移動端h5,壓縮預覽圖片

專案裡邊這次用到了移動端上傳圖片,拿出來分享下。 1.首先是思路,在input 發生change的時候判斷瀏覽器時候支援圖片預覽,支援的情況下校驗圖片的格式,圖片的大小,之後將拿到的圖片進行canvas壓縮,圖片轉base64,然後上傳。 2.程式碼