『壹』 js、ajax怎樣上傳
ajaxfileupload.js插件的使用很簡單。
前台HTML代碼類似:
<script type="text/javascript">$(#buttonUplod).click(function () { $.ajaxFileUpload ({ url:'doajaxfileupload.php', //你處理上傳文件的服務端 secureuri:false, //與頁面處理代碼中file相對應的ID值 fileElementId:'img', dataType: 'json', //返回數據類型:text,xml,json,html,scritp,jsonp五種 success: function (data) { alert(data.file_infor); } })});</script><input id="img" type="file" size="45" name="img" ><button id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
後台doajaxfileupload.php腳本:
<?php $upFilePath = "../attachment/";$ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath); if($ok === FALSE){ echo json_encode('file_infor'=>'上傳失敗'); }else{ echo json_encode('file_infor'=>'上傳成功'); }?>
為了測試,可以使用類似下面的方式保存傳遞過來的變數值:
$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'上傳成功'));
exit (json_encode('file_infor'=>'上傳失敗'));
※ 注意
請留意HTML代碼文件框中的標記:
1. id='img'是用於給ajaxfileupload.js插件的fileElementId:'img'識別的,jQuery選擇器會利用該字元串獲得文本框的值;
2. name='img'是用於通過post方式提交到後台腳本時,PHP通過$_FILES['img']讀取上傳文件的數據,若沒有該值,$_FILES變數為空;
『貳』 js如何上傳文件
js採用File API 來上傳文件的。
File API 由一組 JavaScript 對象以及事件構成。賦予開發人員操作在 <input type=」file」 … /> 文件選擇控制項中選定文件的能力。圖 1 展示了 File API 所有的 JavaScript 的組合關系。
File API 簡單示例
<body>
<h1>File API Demo</h1>
<p>
<!-- 用於文件上傳的表單元素 -->
<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
action="javascript: uploadAndSubmit();">
<p>Upload File: <input type="file" name="file" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
<div>Progessing (in Bytes): <span id="bytesRead">
</span> / <span id="bytesTotal"></span>
</div>
</p>
</body>
運行效果:
『叄』 js:點擊按鈕上傳圖片,最多能上傳3張,上傳第4張給出提示,js怎麼寫
你的上傳按鈕是怎麼操作的?是表單的submit還是單獨的按鈕onclick事件調用方法?
『肆』 js 如何使用選擇上傳的本地文件
<form><input type="file" /></form> js提交必須以 表單post 後台接收 inputStream 欄位里存放的是文件
『伍』 js 大文件分片上傳處理如何實現
推薦採用webuploader控制項來解決。
關於WebUploader的功能說明:
大文件上傳續傳
支持超大文件上傳(100G+)和續傳,可以關閉瀏覽器,重啟系統後仍然繼續上傳。
開源
提供ASP.NET,JSP,PHP示例和源代碼,其中JSP提供MySQL,Oracle,SQL Server資料庫的配置和示例代碼。
分片、並發
分片與並發結合,將一個大文件分割成多塊,並發上傳,極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時,只需要重傳出錯分片,而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮,節省網路數據傳輸。
解析jpeg中的meta信息,對於各種orientation做了正確的處理,同時壓縮後上傳保留圖片的所有原始meta數據。
多途徑添加文件
支持文件多選,類型過濾,拖拽(文件&文件夾),圖片粘貼功能。上傳本地指定路徑的文件,不需要通過點擊按鈕選擇文件。
粘貼功能主要體現在當有圖片數據在剪切板中時(截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制),Ctrl + V便可添加此圖片文件。
HTML5 & FLASH
兼容主流瀏覽器和低版本瀏覽器,介面一致,實現了兩套運行時支持,用戶無需關心內部用了什麼內核。而且支持IE6,IE8瀏覽器。
同時Flash部分沒有做任何UI相關的工作,方便不關心flash的用戶擴展和自定義業務需求。
基於內存映射模式進行IO操作,充分發揮操作系統性能。
MD5秒傳
當文件體積大、量比較多時,支持上傳前做文件md5值驗證,一致則可直接跳過。
如果服務端與前端統一修改演算法,取段md5,可大大提升驗證性能,耗時在20ms左右。
易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件,可自由搭配。
採用AMD規范組織代碼,清晰明了,方便高級玩家擴展。
『陸』 js通過ID上傳文件到文件夾。求代碼!!
如果只是前台的話
簡單的你就用表單提交就行了啊
formid="form1"name="form1"action=""method="post"enctype="multipart/form-data">
<tableclass="pedit_edit"width="100%"border="0"cellspacing="0">
<tr>
<tdcolspan="2"></td>
</tr>
<tr>
<tdclass="tit">文件:</td>
<tdclass="cnt"><inputtype="file"name="file"size="45"value=""id="file"style="width:250px"/></td>
</tr>
</table>
</form>
然後js裡面直接form1.submit();就好了
後台看你是用什麼寫了,如果是java 的話有Apache的第三方包,如果是asp.net那估計也有包支持
『柒』 使用js向伺服器上傳文件
(1)js無法向網站伺服器傳送文件只能用FTP傳送文件,(2)是動態網站要用js代碼函數與伺服器資料庫代碼建立連接函數。對應資料庫,數據,相應單位,通過指定路徑傳輸倒是制定數據單位。例如照片imag數據單位格式標注照片。通過編輯代碼任意網路客戶端都可上傳到資料庫imag格式單位標注中.相片.
『捌』 js超大文件上傳如何實現
利用File文件介面將文件切成順序的若干小片,然後上傳到伺服器,全部上傳完後由服務端進行合並和校驗
『玖』 如何通過js完成多個文件的上傳
HTML5 file組件的新屬性
accept : 如果在file組件中增加這個屬性就可以直接控制上傳的文件類型了,實在是很方便。
multiple:是否允許選擇多個文件
HTML5 頁面代碼修改後
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以參閱:IANA MIME 類型(標准 MIME 類型的完整列表),如果使用的是DW開發的話,軟體本身就有提示。
如果選擇了多個文件,可以用JS做循環列印,看看文件的名稱,類型和大小,看演示代碼
function printFileInfo(){
var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 個文件的名字:"+ file.name +
" , 文件類型:"+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循環多文件的話,就可以嘗試多文件上傳了。
1、首先創建 XMLHttpRequest 對象
//這是全局變數。因為是示例,所以就沒有判斷瀏覽器類型,低版本IE這么寫的話會出問題的
var xhr = new XMLHttpRequest()
2、上篇介紹了進度事件(Progress) , 這次實現 progress 和 error 2個事件
error:在請求發生錯誤時觸發。
對應上傳時發生錯誤導致的上傳失敗:uploadFailed()
//上傳失敗
function uploadFailed(evt) {
alert("上傳失敗");
}
progress:在接收相應期間持續不斷觸發。
對應上傳進度方法:onprogress()
/**
* 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已經上傳大小情況
var tot = evt.total; //附件總大小
var per = Math.floor(100*loaded/tot); //已經上傳的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
最後就是上傳方法了,注意上面的html代碼中上傳用的方法也需要改成這個uploadFile()方法才能正常使用。
//上傳文件
function uploadFile() {
//將上傳的多個文件放入formData中
var picFileList = $("#pic").get(0).files;
var formData = new FormData();
for(var i=0; i< picFileList.length; i++){
formData.append("file" , picFileList[i] );
}
//監聽事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//發送文件和表單自定義參數
xhr.open("POST", "upload");
//記得加入上傳數據formData
xhr.send(formData);
}
『拾』 js上傳本地音樂到網上 求js代碼 就像上傳本地圖片一樣 把本地的音樂和視頻上傳到網上
不是很清楚你問的什麼
首先 上傳文件一定是要提交form的 用submit 當然 改成用js也可以提交form
看你這個意思是不是想要個你圖片上的樣式呢?還是想模仿非同步提交?還是別的什麼意思