當前位置:首頁 » 文件管理 » html上傳插件

html上傳插件

發布時間: 2022-08-06 23:17:27

1. html的上傳控制項在谷歌火狐等瀏覽器中怎麼獲取絕對路徑啊

因為安全原因,本地都獲取不了絕對路徑,只有上傳到伺服器,保存後,可以獲取文件在伺服器的絕對路徑,考慮兼容性一般都是使用Jquary插件,推薦Uploadify

2. 請問ASP要如何使用jquery的插件uploadify,官網上的只有php

Uploadify簡單說來,是基於Jquery的一款文件上傳插件。它的功能特色總結如下:

支持單文件或多文件上傳,可控制並發上傳的文件數

在伺服器端支持各種語言與之配合使用,諸如PHP,.NET,java……

通過參數可配置上傳文件類型及大小限制

通過參數可配置是否選擇文件後自動上傳

易於擴展,可控制每一步驟的回調函數(onSelect, onCancel……)

通過介面參數和CSS控制外觀

更多……

相關鏈接

Uploadify主頁地址:http://www.uploadify.com/ 在該頁面你可以了解到關於他的更多內容。

Uploadify在線演示:在線Demo

Uploadify配置參數及介面文檔:http://www.uploadify.com/documentation

Uploadify插件下載地址:http://www.uploadify.com/download

使用方法

下載插件安裝包後,可以看到裡面的幾個主要文件:jquery.uploadify.js(完成上傳功能的腳本文件,在調用頁面引用)、uploadify.css(外觀樣式表)、uploader.swf(上傳控制項的主體文件,flash控制項)、upload.php(伺服器端處理文件,官方僅提供了php版的)

引用了插件文件後,在頁面中做如下調用:

//聲明一個普通的html文件上傳控制項,並指定id

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

//將聲明的普通上傳控制項與Uploadify插件綁定

<script type="text/javascript">

$(document).ready(function() {

$('#fileInput').fileUpload ({

//以下參數均是可選

'uploader' : 'uploader.swf', //指定上傳控制項的主體文件,默認『uploader.swf』

'script' : 'upload.php', //指定伺服器端上傳處理文件,默認『upload.php』

'cancelImg' : 'cancel.png', //指定取消上傳的圖片,默認『cancel.png』

'auto' : true, //選定文件後是否自動上傳,默認false

'folder' : '/uploads' //要上傳到的伺服器路徑,默認『/』

'muti' : true, //是否允許同時上傳多文件,默認false

'fileDesc' : 'rar文件或zip文件' //出現在上傳對話框中的文件類型描述

'fileExt' : '*.rar;*.zip', //控制可上傳文件的擴展名,啟用本項時需同時聲明fileDesc

'sizeLimit': 86400 //控制上傳文件的大小,單位byte

'simUploadLimit' :5 //多文件上傳時,同時上傳文件數目限制

});

});

</script>

上面列出了我認為常用的配置選項,此外還有很多參數可配置,參考官方文檔

通過調用相關功能函數,聲明功能按鈕。

例如聲明上傳功能按鈕(自動上傳時不需要):

<a href="javascript:$('#fileInput').fileUploadStart();">上傳文件</a>

聲明取消多文件上傳時上傳隊列:

<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上傳隊列</a>

文章來自中國建站:http://www.jz123.cn/text/2419333.html

3. html5 大文件斷點續傳 插件有哪些比較好

上傳:
上傳時附帶一個描述數據起始位置的參數。
接受的一端接收到數據後,按照起始位置續寫文件。
下載:
按照本地已保存的大小,提交下載請求。
伺服器按照請求的位置,傳數據。

大概就是這么個意思。還要處理很多異常情況。

4. html5+上傳圖片時有沒有截圖的插件(手機端的)

按住電源鍵(關機鍵)的同時按主屏幕(HOME)鍵,聽見"咔嚓"一聲,就代表截圖成功了。
另外還有用截圖軟體截圖的,你可以下載一款在你手機上最好用的截圖軟體,安裝後就可以使用截圖功能了。答題不易,互相幫助,手機提問的朋友在客戶端右上角評價點滿意即可.
如果你認可我的回答,請點擊採納為滿意回答按鈕!

5. html上傳圖片怎麼弄

可以將圖片轉base64,也可以直接當成文件上傳。代碼有點多,就不寫了,如果實在不會就找插件吧

6. html 添加插件/文件上傳加密

這個需要通過控制項來實現。

7. 如何使用第三方上傳插件web uploader的demo

要解決302問題也很簡單,就是html5的文件上傳,正好最近在ueditor里看到網路的webuploader,會自動選擇flash html5,就是一個成熟的解決方案了。

先看前端,我們將最常用的操作封裝為插件,asp.net中和MVC中最好使用相對於應用程序的絕對路徑,自行定義全局 applicationPath :var applicationPath = "@(Href("~")=="/"?"":Href("~"))";
前端插件代碼:

8. extjs 3.4中 怎麼給htmlEdit添加圖片插件 實現圖片上傳功能

首先要使用extjs自帶的HTMLEditor,然後在原有的工具條上添加一個圖片按鈕,點擊這個圖片按鈕要彈出窗口,這個窗口負責實現上傳功能,實現上傳後,要將上傳的圖片路徑添加到HTMLEditor的游標處,並且要以<IMG></IMG>的方式,這樣HTMLEditor才能解析出來。實現代碼如下:

前台JSP頁面



fieldLabel : '商品特性',
id : 'shopSp.spTxms',

name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'


這其中引用了StarHtmleditor,StarHtmleditor.js的代碼如下,直接將代碼復制下來,然後新建個JS,全復制進去就行了。


var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '選擇文件',
id : 'UserFile',
name : 'UserFile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能為空',
anchor : '90%'
}],
buttons : [{
text : '上傳',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上傳......',
url : 'HTMLEditorAddImgCommonAction.action',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
//win.hide();//原始方法,但只能傳一個圖片
//更新後的方法
form.reset();
win.close();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告','上傳失敗',action.result.errors.msg);
}
});
}
}, {
text : '關閉',
handler : function() {
win.close(this);
}
}]
})

var win = new Ext.Window({
title : "上傳圖片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform

});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);

JS的第一句var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 網上是沒有var的,不用var不知道為什麼總是報錯,另外JS一定要與JSP的編碼方式一致,要不然報莫名其妙的錯誤,而且錯誤都沒有顯示。

後台java代碼



/****
* HTMLEditor增加上傳圖片功能:
* 1、上傳圖片後,需要將圖片的位置及圖片的名稱返回給前台HTMLEditor
* 2、前台HTMLEditor根據返回的值將圖片顯示出來
* 3、進行統一保存
* @param 上傳圖片功能
* @return JSON結果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\", "/").substring(path.toString().replaceAll("\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}


特別要注意的是路徑問題,路徑問題主要有2點需要注意:

1、前台頁面引用StarHtmleditor.js的路徑一定要正確;

2、Htmleditor上傳的圖片路徑一定要改,因為上傳之後圖片路徑變為http://localhost:8080/,在正常使用中圖片不顯示,要將該地址替換為伺服器的IP地址;替換方法如下:


//獲取本地IP地址,因為extjs的htmleditor上傳的照片路徑有問題,需要將路徑替換為本機IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));

這樣基本就完成了這個HTMLEditor上傳圖片功能。

如圖:

9. HTML中上傳文件的表單(file有一個編輯框和一個瀏覽的按鈕),客戶只想要一個按鈕,要求把編輯框去掉

如果那樣的話,只能將 瀏覽器自帶的file控制項進行隱藏,使用其他開源的上傳組件替代。

jquery上傳插件 自己網上網路下,剩下的靠你自己了。

推薦=》 uploadify.

熱點內容
伺服器部署錯了怎麼重置 發布:2024-04-24 00:02:30 瀏覽:348
色選機腳本 發布:2024-04-23 23:52:35 瀏覽:257
吉利博越推薦買哪個配置 發布:2024-04-23 23:52:34 瀏覽:635
java字典排序 發布:2024-04-23 23:52:34 瀏覽:162
sky光遇測試服怎麼下安卓 發布:2024-04-23 23:46:40 瀏覽:798
access如何使用sql 發布:2024-04-23 23:29:39 瀏覽:910
ug10編程優缺點 發布:2024-04-23 23:08:47 瀏覽:335
房產配置怎麼設置 發布:2024-04-23 22:59:26 瀏覽:850
python怎麼調用函數 發布:2024-04-23 22:58:09 瀏覽:755
懷舊服怎麼把g轉到別的伺服器 發布:2024-04-23 22:57:53 瀏覽:221