當前位置:首頁 » 文件管理 » 批量上傳js

批量上傳js

發布時間: 2022-06-29 02:38:17

Ⅰ 用html,js怎麼將本地圖片批量上傳,上傳前預覽,並可以選中某張圖片給他加旋轉效果。急求高手相救!

批量上傳?js就用Jquery上傳控制項吧(開源社區裡面有例子)。或者,用ckeditor這個符文本框,很好用的~

Ⅱ 請問怎麼用js遍歷 <input />中的id,現在沒分了,等我有了再給您,謝謝各位了!我要實現文件批量上傳,急!

把id加到6個input外,然後通過id選擇它下面的6個input

Ⅲ js批量上傳界面的實現

1.下載插件快速上傳。
2.用HTML上傳控制項有限制的上傳。
我下面用javascript腳本來實現2的功能。
1.動態的增加上傳控制項。
2.動態的刪除上傳控制項。
3.限制用戶在上傳控制項中亂輸入路徑。
locale
photo
function
AddMoreRow()
{
var
oRow=event.srcElement.parentNode.parentNode;
var
oTable=oRow.parentNode.parentNode;
oNewRow=oTable.insertRow();
for(i=0;i1)
{
oTable.deleteRow(oRow.rowIndex);
if(oTable.rows.length==1)
{
oTable.all("DelBtn").disabled=true;
}
}
}
function
DisabledKeyInput()
{
if(event.keyCode!=8&&event.keyCode!=46)
{
event.returnValue=false;
}
}
批量上傳
名稱*
文件路徑*
說明*
[Ctrl+A
全選
注:如需引入外部Js需刷新才能執行]

Ⅳ 有什麼支持安卓和ios批量上傳的js插件

Android和ios都是用navtive語言編寫的app,那麼調用js的方法如下:
Native 調用 JS:
本質就一個方法,通過 ,都是同步。
1.通常方法:js修通過改doucument的loaction或者新建一個看不見的iFrame,修改它的 src,就會觸發回調 webView 的 shouldStartLoadWithRequest,參數 request 的 url 就是新賦值的 location 或者 url,上層截獲這個 url 的參數,對此分發即可。 這個都是非同步調用的。
如 JS function:
var messagingIframe;
messagingIframe = document.createElement('iframe');
messagingIframe.style.display = 'none';
document.documentElement.appendChild(messagingIframe);
function TestIOSJS(){
messagingIframe.src = "ios/test/click";
};
當觸發上面的JS時,webview會收到下面的回調:
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *url = request.URL.absoluteString;
if([url hasSuffix:@"ios/test/click"]){
//do something you want
return NO;
}
return YES;
}
通過截獲這個request的參數就可以做native需要做的事情。

Ⅳ 怎麼實現用JSP批量上傳帶進度條,越詳細越好,最好帶上文件

用JSP可以批量上傳,要想帶進度條,單單JSP似乎難以做到,但可借用一些JS插件,如:ExtJS。

ExtJS裡面有進度條功能,將JSP與ExtJS內部的數據結合起來,應該可以實現,不過這種我沒做過。

在我所見中,163郵箱里有這種的功能,可以參考一下。

Ⅵ 怎麼實現文件批量上傳 顯示進度條而且上傳後不跳轉頁面 推薦幾個上傳插件

用JSP可以批量上傳,要想帶進度條,單單JSP似乎難以做到,但可借用一些JS插件,如:ExtJS。

ExtJS裡面有進度條功能,將JSP與ExtJS內部的數據結合起來,應該可以實現,不過這種我沒做過。

在我所見中,163郵箱里有這種的功能,可以參考一下。

Ⅶ 求AJAX+JS 上多傳文件的方法請進來看 詳細

不可能的.程序不可能讀取到客戶端的文件的.
你只能多次添加文件,再來實現批量上傳.
如果你要選定用文件夾上傳的話,那隻能用控制項來實現了.不過這個也不現實.沒人會下載你的控制項的.

Ⅷ js客戶端一次性上傳指定目錄下的所有符合要求文件

你這個完全用js來實現有點不現實,js對客戶端的文件操作是有很多限制的,這種情況可以考慮使用flash來處理上傳

Ⅸ 我需要一個js或者jquery能批量上傳圖片+預覽的功能。急~~~急~~~急~~

WebUploader項目,符合你的要求。

//文件上傳過程中創建進度條實時顯示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');

//避免重復創建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}

$percent.css('width',percentage*100+'%');
});
//文件上傳成功,給item添加成功class,用樣式標記上傳成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});

//文件上傳失敗,顯示上傳出錯。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');

//避免重復創建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}

$error.text('上傳失敗');
});

//完成上傳完了,成功或者失敗,先刪除進度條。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});

更多細節,請查看js源碼

Ⅹ 你好,我用webuploader.html5only.min.js實現批量圖片上傳,我該怎麼在action中獲取上傳的那些文件呢

1.1 分片、並發
分片與並發結合,將一個大文件分割成多塊,並發上傳,極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時,只需要重傳出錯分片,而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
1.2 預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮,節省網路數據傳輸。
解析jpeg中的meta信息,對於各種orientation做了正確的處理,同時壓縮後上傳保留圖片的所有原始meta數據。
1.3 多途徑添加文件
支持文件多選,類型過濾,拖拽(文件&文件夾),圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時(截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制),Ctrl + V便可添加此圖片文件。
1.4 HTML5 & FLASH
兼容主流瀏覽器,介面一致,實現了兩套運行時支持,用戶無需關心內部用了什麼內核。
同時Flash部分沒有做任何UI相關的工作,方便不關心flash的用戶擴展和自定義業務需求。
1.5 MD5秒傳
當文件體積大、量比較多時,支持上傳前做文件md5值驗證,一致則可直接跳過。
如果服務端與前端統一修改演算法,取段md5,可大大提升驗證性能,耗時在20ms左右。
1.6 易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件,可自由搭配。
採用AMD規范組織代碼,清晰明了,方便高級玩家擴展。
2、引入資源
2.1 下載包內容

├── Uploader.swf // SWF文件,當使用Flash運行時需要引入。

├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本

├── webuploader.flashonly.js // 只有Flash實現的版本。
├── webuploader.flashonly.min.js // min版本

├── webuploader.html5only.js // 只有Html5實現的版本。
├── webuploader.html5only.min.js // min版本

├── webuploader.withoutimage.js // 去除圖片處理的版本,包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本

2.2 或者直接使用由staticfile提供的cdn版本,或者下載Git項目包。

// SWF文件,當使用Flash運行時需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf

// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js

// 只有Flash實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js

// 只有Html5實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js

// 去除圖片處理的版本,包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js

2.3 DIY打包
WebUploader文件打包藉助了Grunt工具來實現
2.3.1 環境依賴
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)

2.3.2 編譯代碼
1.克隆 webuploader git倉庫,git clone https://github.com/fex-team/webuploader.git。
2.安裝node依賴,npm install。
3.執行grunt dist,此動作會在dist目錄下面創建合並版本的js, 包括通過uglify壓縮的min版本。

2.3.3 配置
打開webuploader倉庫根目錄下面的Gruntfile.js文件, 代碼合並有buildtask來完成。找到build配置項。
Gruntfile.js已經配置了一個自定義合並的demo. 打包只支持HTML5的版本

// 自己配置的實例
// glob語法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}

3、angular指令——<web-uploader>
3.1 指令功能
添加一個上傳文件按鈕,可以自行配置上傳文件的類型和過濾規則,且在彈出的模態框中進行操作,支持連續上傳,分類選擇上傳
3.2 使用說明
這里只是使用說明,可能會加一些注意事項,具體參數或者變數說明請參看後面
3.2.1 頁面添加一個指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>

3.2.2 配置上傳類型和過濾規則
上傳類型
type有四種類型,分別為
image:圖片
video:音視頻
flash:flash
file:辦公文檔,壓縮文件等等
過濾規則
accept有四個對象屬性,屬性中包含標題、允許文件後綴、允許的mimetype
3.2.3 指令中綁定彈出模態框的事件
web-uploader這個指令中其實只做了一件事,給元素本身綁定彈出模態框的事件,具體上傳文件是在模態框中完成的
3.2.4 初始化uploader類,配置相關屬性
在模態框控制器中用到了$timeout
$timeout(function(){
//這里是上傳配置代碼
},0)

因為配置uploader時需要事先准備好dom元素,angular打開模態框是非同步而JavaScript是單線程,所以實際上在執行模態框控制器中的代碼時,模態框並沒有打開,也就是dom並沒有載入完成,這會導致WebUploader報a.runningtime is not a function...的錯誤
3.3 指令詳細說明
3.3.1 父級controller中的配置

.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允許上傳的類型 圖片/音視頻/flash/文件
$scope.accept = {
//圖片
image: {
title : 'Images',//標題
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允許上傳文件的後綴
mimeTypes : 'image/*'//允許的mimetype
},
//音視頻
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//辦公文檔,壓縮文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};

}])

3.3.2 指令web-uploader

.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){

$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);

熱點內容
android登陸狀態 發布:2022-08-19 15:18:04 瀏覽:936
使用php搭建tcp伺服器 發布:2022-08-19 15:16:55 瀏覽:337
pygame編譯Python 發布:2022-08-19 15:15:47 瀏覽:748
ip欺騙雲伺服器 發布:2022-08-19 15:15:39 瀏覽:801
寶塔輕應用伺服器怎麼設置 發布:2022-08-19 15:15:19 瀏覽:572
配置埠數據要在哪個文件下 發布:2022-08-19 15:13:59 瀏覽:321
雷電模擬器移動任務腳本 發布:2022-08-19 15:12:28 瀏覽:799
安卓手機年味超時了是什麼情況 發布:2022-08-19 15:06:34 瀏覽:954
剪映如何遮住頭像備注安卓 發布:2022-08-19 15:06:20 瀏覽:881
位元組信息存儲 發布:2022-08-19 15:06:00 瀏覽:196