html5ajax上傳

Ⅰ ajax上傳圖片，C#編寫的webserbice接收，無法上傳

不是這樣上傳的，你就傳個圖片路徑伺服器怎麼能獲取到客戶端的文件？
如果需要ajax非同步上傳圖片，有兩種解決方案，
一、採用HTML5的FileReader的readAsDataURL獲取圖片的base64編碼，獲取出來是一個字元串，把這個字元串上傳到伺服器，伺服器接收到採用Convert.FromBase64String獲取圖片byte數組，再轉換成圖片格式保存。
二、使用隱藏form表單和隱藏iframe，將form的target屬性設置為iframe的name，在from表單里放一個file控制項，用它選擇圖片，然後提交form表單，後台接收到圖片保存，返回一段js代碼，類似window.parent.uploadCallback({"state":1,"url":"你保存圖片的路徑"});，然後在頁面寫一個function uploadCallback(result){//處理回調}
不知道有沒有更好的解決辦法，我用過的就這兩種，感覺都挺好用。

Ⅱ html5文件上傳實現進度條需要後端嗎

不需要後端的，前端自己判斷，代碼如下：
function uploadFile(){

// 獲取上傳文件，放到 formData對象裡面
var pic = $("#myhead").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
$.ajax({
type: "POST",
url: "upload",
data: formData ,//這里上傳的數據使用了formData 對象
processData : false,
//必須false才會自動加上正確的Content-Type
contentType : false ,

//這里我們先拿到jQuery產生的 XMLHttpRequest對象，為其增加 progress 事件綁定，然後再返回交給ajax使用
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});

Ⅲ CI如何ajax方式上傳圖片

方法如下：

1、新建一個CI框架項目ajax，在controllers文件夾下新建控制器img，在img控制器下新建方法index，如下:

注意事項：

使用ajax，要引入js文件，比如jquery-1.7.2.min.js，否則ajax不執行。

Ⅳ 前端上傳文件的幾種方法

1.表單上傳

最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。

form表單上傳

表單上傳需要注意以下幾點：

(1).提供form表單，method必須是post。

(2).form表單的enctype必須是multipart/form-data。

javascript學習交流群：453833554

enctype 屬性規定在發送到伺服器之前應該如何對表單數據進行編碼。默認地，表單數據會編碼為 "application/x-www-form-urlencoded"。就是說，在發送到伺服器之前，所有字元都會進行編碼。HTML表單如何打包數據文件是由enctype這個屬性決定的。enctype有以下幾種取值：

application/x-www-form-urlencoded：在發送前編碼所有字元(默認)(空格被編碼為』+』，特殊字元被編碼為ASCII十六進制字元)。

multipart/form-data：不對字元編碼。在使用包含文件上傳控制項的表單時，必須使用該值。

text/plain：空格轉換為 「+」 加號，但不對特殊字元編碼。

默認enctype=application/x-www-form-urlencoded，所以表單的內容會按URL規則編碼，然後根據表單的提交方法：

method=』get』 編碼後的表單內容附加在請求連接後，

method=』post』 編碼後的表單內容作為post請求的正文內容。

Ⅳ html5上傳文件如果用jquery ajax發送怎麼監聽事件

直接綁定事件觸發ajax就行了，沒必要一定要做事件監聽

Ⅵ 基於HTML5的多圖Ajax上傳的php後台接收並獲取圖片寬高等信息

//但是為什麼我用file_exists()判斷文件是否存在時，得到的結果卻是不存在呢
這句話後面加一句
$file='../uploads/' . $file;

你都把文件存成這個文件了 還用原來的文件名判斷能行嗎
後面的錯誤也是一樣的

也可以直接把後面兩個$file改掉
if(!file_exists('../uploads/' . $file)){

$src_info = @getimagesize('../uploads/' . $file);

Ⅶ html5如何上傳圖片到伺服器

表單，ajax 都可以，具體要看你伺服器要哪種格式了

Ⅷ 如何實現HTML5文件斷點續傳

實現HTML5文件斷點續傳

一、實現文件多選

HTML5的<input>新增了"multiple"屬性，該屬性可接受多個值的文件上傳欄位
<input type="file" multiple="multiple" name="file" id="file">
添加了該屬性用戶就可以在彈出的對話框中一次性選擇多個文件了
二、實現文件從計算機拖拽到網頁以及添加文件隊列功能
這里我們用 dragover 和 drop 兩個事件來管理文件拖拽的功能
其中 dragover 用來處理在指定的元素上移動時的事件，這里我們通過給body綁定dragover時間來處理頁面中拖動文件的事件
document.body.addEventListener('dragover', dragFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = '';
}
用 drop 事件來處理滑鼠松開時候的事件，此時應該將用戶拖動過來的文件加入到上傳隊列中，以供後續的處理
document.body.addEventListener('drop', dropFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
// dataTransfer.files屬性可以獲取到所有拖動選擇的文件，通過遍歷可以讀取到所有文件的信息。
// 遍歷每個文件可以獲取到文件的 name、size、type、lastModifiedDate等關鍵信息
var files = evt.dataTransfer.files;
// addfile 方法 用來添加上傳文件隊列，在input的change事件中也需要調用
// 該方法首先檢查有無文件正在上傳中，如果有就將後續加入的文件放到上傳隊列中，如果沒有文件正在上傳就直接執行上傳命令
addfile(files);
}
三、文件續傳原理
目前比較常用的斷點續傳的方法有兩種，一種是通過websocket介面進行文件上傳，另一種是通過ajax，兩種方法各有千秋，雖然websocket聽起來比較高端些~ 但是除了用了不同的協議外其他的演算法基本上都是很相似的，並且服務端要開啟ws介面，這里用相對方便的ajax來說明斷點上傳的思路。
說來說去，斷點續傳最核心的內容就是把文件「切片」然後再一片一片的傳給伺服器，但是這看似簡單的上傳過程卻有著無數的坑。
首先是文件的識別，一個文件被分成了若干份之後如何告訴伺服器你切了多少塊，以及最終伺服器應該如何把你上傳上去的文件進行合並，這都是要考慮的。
因此在文件開始上傳之前，我們和伺服器要有一個「握手」的過程，告訴伺服器文件信息，然後和伺服器約定切片的大小，當和伺服器達成共識之後就可以開始後續的文件傳輸了。
前台要把每一塊的文件傳給後台，成功之後前端和後端都要標識一下，以便後續的斷點。
當文件傳輸中斷之後用戶再次選擇文件就可以通過標識來判斷文件是否已經上傳了一部分，如果是的話，那麼我們可以接著上次的進度繼續傳文件，以達到續傳的功能。
四、文件的前端切片
有了HTML5 的 File api之後切割文件比想想的要簡單的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
參數start是開始切片的位置，end是切片結束的位置 單位都是位元組。通過控制start和end 就可以是實現文件的分塊
如
file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......
五、文件片段的上傳
上一部我們通過slice方法把文件分成了若干塊，接下來要做的事情就是把這些碎片傳到伺服器上。
這里我們用ajax的post請求來實現
textpop-up

var xhr = new XMLHttpRequest();
var url = xxx // 文件上傳的地址 可以包括文件的參數 如文件名稱 分塊數等以便後台處理
xhr.open('POST', url, true);
xhr.onload = function (e){
// 判斷文件是否上傳成功，如果成功繼續上傳下一塊，如果失敗重試該快
}
xhr.upload.onprogress = function(e){
// 選用 如果文件分塊大小較大 可以通過該方法判斷單片文件具體的上傳進度
// e.loaded 該片文件上傳了多少
// e.totalSize 該片文件的總共大小
}
xhr.send(packet);