1. 程式人生 > >plupload上傳視訊等大檔案

plupload上傳視訊等大檔案

本文演示了新浪微博plupload上傳視訊檔案,支援格式有mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv。本文的視訊上傳分兩步,首先選擇檔案,然後點選上傳按鈕開始上傳,您也可以直接選擇檔案上傳,具體請參考http://www.erdangjiade.com/js/863.html
本案例演示參考下這裡: http://www.erdangjiade.com/js/874.html
效果圖片如下:

完整程式碼邏輯如下:
視訊型別檔案上傳,支援中途取消上傳
var uploader_video = new plupload.Uploader({//建立例項的構造方法
runtimes: 'gears,html5,html4,silverlight,flash', //上傳外掛初始化選用那種方式的優先順序順序
browse_button: ['video_upload_btn'], // 上傳按鈕
url: "ajax.php", //遠端上傳地址
flash_swf_url: 'js/plugins/plupload/Moxie.swf', //flash檔案地址
silverlight_xap_url: 'js/plugins/plupload/Moxie.xap', //silverlight檔案地址
filters: {
max_file_size: '10mb', //最大上傳檔案大小(格式100b, 10kb, 10mb, 1gb)
mime_types: [//允許檔案上傳型別
{title: "files", extensions: "mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}
]
},
// chunk_size: "5mb", //分片上傳檔案時,每片檔案被切割成的大小,為數字時單位為位元組。也可以使用一個帶單位的字串,如"200kb"。當該值為0時表示不使用分片上傳功能
multi_selection: false, //true:ctrl多檔案上傳, false 單檔案上傳
init: {
FilesAdded: function(up, files) { //檔案上傳前

$("#video_name_box").css({"display": "inline-block"});
$("#video_upload_btn").hide();
$("#video_file_name").text(files[0].name);
$("#upload_video").removeClass("disabled");

$("#upload_video").click(function() {
uploader_video.start(); //呼叫例項物件的start()方法開始上傳檔案,當然你也可以在其他地方呼叫該方法
})
$("#video_iput").attr("file_id", files[0]['id'])
// console.log(files);
},
UploadProgress: function(up, file) { //上傳中,顯示進度條
$("#video_loading").show();
$('#upload_video_area,#video_upload_area').hide();
var percent = file.percent;
$("#percent").css({"width": percent + "%"});
$("#percentnum").text(percent + "%");
$("#video_success").hide();

},
FileUploaded: function(up, file, info) { //檔案上傳成功的時候觸發
$("#video_loading").hide();
$("#video_success").show();
var data = eval("(" + info.response + ")");//解析返回的json資料
$("#video_iput").html("<input type='hidden'id='video_file' value='" + data.pic + "'/><input type='hidden'id='video_name' value='" + data.name + "'/>");
},
Error: function(up, err) { //上傳出錯的時候觸發
alert(err.message);
}
}
});
uploader_video.init();

相關推薦

plupload視訊檔案

本文演示了新浪微博plupload上傳視訊檔案,支援格式有mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv。本文的視訊上傳分兩步,首先選擇檔案,然後點選上傳按鈕開始上傳,您也可以直接選擇檔案上傳,具體請參考http://www.erdangj

plupload圖片檔案到七牛雲平臺

1.引入外掛 <script src="/themes/bqg/js/lib/plupload.full.min.js"></script> 2:引入七牛cdn <script src="/themes/bqg/js/qiniu.min.j

前端元件WebUploader檔案與Python結合的實現

Python實現大檔案分片上傳 引言 想借著這篇文章簡要談談WebUploader大檔案上傳與Python結合的實現。 WebUploader是百度團隊對大檔案上傳的前端實現,而後端需要根據不同的語言自己實現。這裡我採用Python語言的Flask框架搭建後端,

Java開發七牛雲端儲存 ,視訊與圖片檔案 , 頁面播放器GrindPlayer.swf

七牛的雲端儲存還是比較強大的 , 可以上傳檔案(什麼格式都可以) , 而且還可以對上傳的檔案進行轉碼等操作. 我在專案中用到的也只是很小的一部分. 七牛上傳檔案需要四個引數: 一.註冊完賬號以後會生成兩個密匙 AccessKey , Secr

laravel 結合plupload檔案到本地

首先定義上傳類 class Uploads { public static function upfiles($files, $path = '', $format_data = false, $add_domain = false) { $res = ['errno' =&g

.NET快速資訊化系統開發框架 V3.2-&gt;Web版本新增“檔案管理中心”集、下載、檔案共享一身,非常實用的功能

  檔案中心是3.2版本開始新增的一個非常實用功能,可以歸檔自己平時所需要的檔案,也可以把檔案分享給別人,更像一個知識中心。檔案中心主介面如下圖所示,左側“我的網盤”展示了使用者對檔案的分類,只能自己看到,“公共盤”中的檔案所有使用者都可以看到。選擇一個分類,右側列出了當前分類的所有檔案(第一列

java視訊檔案圖片

//轉載地址 https://www.cnblogs.com/smart-hwt/p/8256836.html 1.jsp頁面 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%  Str

C#實踐問題:如何實現檔案下載

一種學習的方法:把握住關鍵點、重點、難點、易錯點等,以點帶面。 使用C#編寫一個簡單的檔案上傳和下載功能很簡單,只要掌握了一些關鍵點和易錯點就足夠在很短的時間內設計一個實用的文件管理頁面。   檔案上傳   前端實現: 第一部分:在前臺aspx內嵌入一條上

django設定並獲取cookie/session,檔案,ajax接收檔案,post/get請求及跨域請求的方法

django設定並獲取cookie/session,檔案上傳,ajax接收檔案等的方法: views.py檔案: from django.shortcuts import render,HttpResponse,redirect import datetime import json from

吐槽微信視訊檔案提示

晚上要下班了老闆發來一個任務:把一個300M左右的視訊壓縮到100M以內,以便在微信上傳送。這倒不是難事,狸窩咱又不是沒用過,開搞!!! 就是這麼邪氣,恰好100.18M 視訊質量:低等質量,音訊質量:低等質量,自定義視訊尺寸:1280*720。咔咔一波操作,100.18M,這神馬鬼這麼巧,匯出一下試

前端元件Plupload使用---視訊

上傳視訊到伺服器 1.引入js外掛: <script type="text/javascript" src="{{ static_url('plupload/js/plupload.full.min.js') }}"></script> 2.ht

js檔案分塊與tornado接收檔案和下載

將檔案分塊上傳使用的是HTML5的功能(IE可能不支援) <div class="layui-container"> <input type="file" id="file" multiple required> <br>

.NET快速資訊化系統開發框架 V3.2->Web版本新增“檔案管理中心”集、下載、檔案共享一身,非常實用的功能

  檔案中心是3.2版本開始新增的一個非常實用功能,可以歸檔自己平時所需要的檔案,也可以把檔案分享給別人,更像一個知識中心。檔案中心主介面如下圖所示,左側“我的網盤”展示了使用者對檔案的分類,只能自己看到,“公共盤”中的檔案所有使用者都可以看到。選擇一個分類,右側列出了當前分類的所有檔案(第一列會根據檔案的型

PHP斷點視訊檔案

<!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8"/>          <title>xhr2</title>     

post視訊檔案到服務端

UIButton *videoBtn = [UIButton buttonWithType:UIButtonTypeCustom]; videoBtn.frame = CGRectMake(20, 20, SCREENWIDTH/3, 40); [v

FileUpload 視訊檔案簡單例項

我們都知道 當Html input  標籤型別為file時 同時將from 表單元素的enctype屬性設定為 multipart/form-data 這樣就可以上傳檔案 ,但是這種方式 只能上傳文字檔案 不能上傳視訊 檔案。這時出現了功能強大的第三方js工具類 fileu

react 中使用 plupload 檔案

這幾天做一個專案的迭代開發,需要在react 中使用plupload 外掛實現上傳檔案。需求很簡單,如下圖,點選“...” 按鈕選擇檔案,點選“Import”按鈕上傳檔案。 plupload 上傳檔案大概分為以下幾步:1. 新建一個uploader例項,並在構造時配置好上傳的

[原創]K8 Struts2 Exp 20170310 S2-045(Struts2綜合漏洞利用工具) [原創]Struts2奇葩環境任意檔案工具(解決菜刀無法檔案亂碼問題)

工具: K8 Struts2 Exploit組織: K8搞基大隊[K8team]作者: K8拉登哥哥部落格: http://qqhack8.blog.163.com釋出: 2014/7/31 10:24:56簡介: K8 Stru

[原創]Struts2奇葩環境任意檔案工具(解決菜刀無法檔案亂碼問題)

 上面這問題問得好  1 不知道大家有沒碰到有些Strus2站點  上傳JSP後訪問404 或者503    注意我說的是404或503不是403(要是403換個css/img等目錄或許可以)    但對於明明

設定檔案的最大小

1>iis7及以上版本 需要在配置檔案裡面設定檔案上傳限定的兩個屬性值:maxAllowedContentLength,maxRequestLength 允許上傳檔案的長度,和請求的長度,兩個大小需要設定一致,如果不一致,則以請求長度為準。 <system.webServer>