h5進度條上傳文件

㈥ 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;
}
}
});

㈦ JSP 上傳文件進度條怎麼做

HTTP本身無法實現上傳
進度條
，因為無法使用JS訪問文件系統，並對
文件流
進行分塊。
可以考慮2種方式實現上傳進度條：
1.flash：flash可以訪問文件系統，並以二進制方式上傳文件，這可以將文件進行分塊;
2.使用
ActiveX控制項
：這個比較復雜一點，能夠監控到每一個位元組的進度，可以自己開發或使用第三方庫。一般來說，對於前台類型的頁面，出於安全和可用性不建議使用ActiveX控制項，

㈧ 上傳文件與設置進度條

1、引入bootstrap.css和jquery.js;
2、點擊按鈕後獲取文件列表，添加到FormData，調用open函數指定類型與URL地址，在發起請求send（）；
3、監聽onreadystatechange事件，當伺服器回應後，把傳回來的數據轉換成JSON字元串，修改img的URL地址，讓圖片文件顯示在頁面中；
4、創建xhr對象開啟監聽文件上傳進度，e.lengthComputable是true則計算進度條百分比，把結果給進度條；
5、進度條完成後，修改顏色，移除類添加類

HTML

JS

㈨ iOS WKWebView與H5交互，JS調OC傳值、OC調JS傳值、進度條載入等(干貨滿滿)

WKWebView是蘋果在iOS 8之後推出的框架，關於它比webview的優勢這里就不講了。主要說一下與JS交互的問題，其實WKWebView已經內置了JS與OC的互調、傳值等方法，使用起來也非常方便，下面就來細細的探討一下以及自己遇到過的坑...

首先來看下WKWebView的初始化相關設置：

一、導入相關頭文件、設置相關代理和屬性

二、WKWebView初始化

注意:
樓主遇到的第一個坑：如果JS給OC傳值為空，必須寫成: postMessage(null)，如果什麼都不寫，方法是調不通的。

1、在viewWillAppear中配置， addScriptMessageHandler name: "這里就是JS的方法，方法名必須統一"

樓主遇到的第二個坑：配置完後必須在 viewWillDisappear 中 remove，否則會造成循環引用，導致crash

2、實現 WKScriptMessageHandler 協議

以上就是JS調OC，JS向OC傳值...

樓主這里舉三個例子：
1: webview載入完成前，將用戶信息傳給js
2: webview載入完成，將相關信息傳給js
3: 調用相冊或相機時，將選擇的圖片請求後台介面，後台返回圖片地址，將該地址回傳給H5，H5將圖片顯示到頁面上

第一個例子: webView載入完成前傳值
因為 evaluatejavaScript 方法默認是在載入完成後調用，所以直接在頁面開始載入中調用是傳不過去的，這個時候怎麼辦呢？ 我們可以讓js端寫兩個方法， 第一個方法是js端開始向oc端發起信息需求的方法名，當oc端收到該方法名的時候，就去調用js端第二個獲取傳值的方法，把信息傳遞過去。

先讓JS端寫個方法調OC，OC實現方法後在這個方法內部給JS傳值

在WKScriptMessageHandler協議中，實現該方法，然後在方法內部給JS傳值

注意： 以上就是在Webview載入完成前傳值，如果列印沒報錯，證明傳參成功，如果web端沒收到，讓他把獲取到值的方法寫到頁面中即可。

第二個例子: webView載入完成,傳值給js

第三個例子: 傳圖片地址給js，js拿到後顯示圖片

1：拍照事件

1.1：將拍的照片請求上傳圖片介面，成功返回圖片地址，並傳值給H5

2: 從相冊中選取照片

2.2：將相冊中選取的照片請求上傳圖片介面，成功返回圖片地址，並傳值給H5

注意: getPhotoCallback 即為調用的方法名，後面傳值格式必須為: ('') ， 這里遇到了第三個坑， 如果方法名寫為: 名稱.名稱 (例如：hello. getPhotoCallback)，這種是調不通的，可以寫成hello_getPhotoCallback的形式，一般的話最好還是定義一個完整的名稱。 剛開始這個問題卡了比較久，一直調不通，在此記錄一下.....

在 viewDidLoad 中注冊進度條監聽

開始載入網頁

載入完成

載入失敗

頁面跳轉失敗

progressView懶載入

添加監聽觀察者

最後別忘記 removeObserver

Demo地址: https://github.com/zhwIdea/WKWebViewAndJS

㈩ 怎樣實現在android實現帶進度條的上傳效果

用到以下兩個類就可實現帶進度條的文件上傳：

1、CustomMultiPartEntity extends MultipartEntity,

2、HttpMultipartPost extends AsyncTask

代碼如下：

import java.io.FilterOutputStream;

import java.io.IOException;

import java.io.OutputStream;

import java.nio.charset.Charset;

import org.apache.http.entity.mime.HttpMultipartMode;

import org.apache.http.entity.mime.MultipartEntity;

public class CustomMultipartEntity extends MultipartEntity {

private final ProgressListener listener;

public CustomMultipartEntity(final ProgressListener listener) {

super();

this.listener = listener;

}

public CustomMultipartEntity(final HttpMultipartMode mode, final ProgressListener listener) {

super(mode);

this.listener = listener;

}

public CustomMultipartEntity(HttpMultipartMode mode, final String boundary,

final Charset charset, final ProgressListener listener) {

super(mode, boundary, charset);

this.listener = listener;

}

@Override

public void writeTo(final OutputStream outstream) throws IOException {

super.writeTo(new CountingOutputStream(outstream, this.listener));

}

public static interface ProgressListener {

void transferred(long num);

}

public static class CountingOutputStream extends FilterOutputStream {

private final ProgressListener listener;

private long transferred;

public CountingOutputStream(final OutputStream out, final ProgressListener listener) {

super(out);

this.listener = listener;

this.transferred = 0;

}

public void write(byte[] b, int off, int len) throws IOException {

out.write(b, off, len);

this.transferred += len;

this.listener.transferred(this.transferred);

}

public void write(int b) throws IOException {

out.write(b);

this.transferred++;

this.listener.transferred(this.transferred);

}

}

}

該類計算寫入的位元組數，我們需要在實現ProgressListener中的trasnfered()方法，更行進度條

public class HttpMultipartPost extends AsyncTask<HttpResponse, Integer, TypeUploadImage> {

ProgressDialogpd;

longtotalSize;

@Override

protectedvoidonPreExecute(){

pd= newProgressDialog(this);

pd.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);

pd.setMessage("Uploading Picture...");

pd.setCancelable(false);

pd.show();

}

@Override

(HttpResponse... arg0) {

HttpClienthttpClient = newDefaultHttpClient();

HttpContexthttpContext = newBasicHttpContext();

HttpPosthttpPost = newHttpPost("http://herpderp.com/UploadImage.php");

try{

= newCustomMultipartEntity(

newProgressListener() {

@Override

public void transferred(longnum){

publishProgress((int) ((num / (float) totalSize) * 100));

}

});

// We use FileBody to transfer an image

multipartContent.addPart("uploaded_file", newFileBody(

newFile(m_userSelectedImagePath)));

totalSize= multipartContent.getContentLength();

// Send it

httpPost.setEntity(multipartContent);

HttpResponseresponse = httpClient.execute(httpPost, httpContext);

String serverResponse = EntityUtils.toString(response.getEntity());

ResponseFactoryrp = newResponseFactory(serverResponse);

return(TypeImage) rp.getData();

}

catch(Exception e) {

System.out.println(e);

}

returnnull;

}

@Override

protectedvoidonProgressUpdate(Integer... progress){

pd.setProgress((int) (progress[0]));

}

@Override

protectedvoidonPostExecute(TypeUploadImageui) {

pd.dismiss();

}

}

在 transferred()函數中調用publishProgress((int) ((num / (float) totalSize) * 100));

在onProgressUpdate()實現上傳進度的更新操作