上傳圖片進度條

A. 百度網盤上傳圖片老是進度條走完了後出錯

你可以這樣解決，把相機裡面的照片復制到電腦上，然後再傳到網路網盤上。qq空間傳照片也要這樣。你試試，希望能幫到你！

B. antd vue upload組件使用customRequest上傳文件顯示文件上傳進度

antd-vue上傳文件upload組件使用自定義上傳方法customRequest無法顯示文件上傳進度條，如下圖紅框內的進度條無法顯示當前文件上傳進度

於是，在網上搜索解決方案：

第一種解決方案是自己封裝組件，通過axios請求的onUploadProgress來獲取文件上傳進度，個人覺得太麻煩；

第二種解決方案是通過upload組件內的方法來顯示進度條，參考文章： https://blog.csdn.net/LittleBlackyoyoyo/article/details/104810242

我採用了第二種解決方案，但是使用調用不了參考文章中的`options.onSuccess(res, options.file)` 

於是查看了github上的源碼，決定通過$refs調用upload組件中顯示進度條的方法和上傳成功方法：

html部分：

```html

<a-upload

  ref="uploadRef"

  name="file"

  :multiple="false"

  :showUploadList="true"

  :file-list="fileList"

  :customRequest="customRequest"

  :remove="removeFile"

  @change="fileChange"

>

  <a-button>

  <a-icon type="upload" /> 上傳文件</a-button>

</a-upload>

```

js部分：

```javascript

uploadFile('upload_files', fileData.file, {

onUploadProgress: (progressEvent) => {

const percentNum = Math.round((progressEvent.loaded * 100) / progressEvent.total);

this.$refs.uploadRef.onProgress(

{

percent: percentNum

},

fileData.file

)

}

}).then(res => {

fileData.file.status = 'done'

fileData.file.url = this.picsPrefix + res.result

this.$refs.uploadRef.onSuccess(res, fileData.file, '')

})

},

fileChange({ file }) {

if (!file.stop) {

this.fileList = []

this.fileList.push(file)

}

},

```

C. 上傳文件與設置進度條

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

HTML

JS

D. 怎樣實現在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()實現上傳進度的更新操作

E. 求助webservice上傳圖片，進度條的問題

這個進度值應該是你自己計算的，你可以用當前已經上傳的大小除以圖片 總大小。然後再publishprogress來更新進度條

F. asp.net如何實現mvc上傳圖片並顯示進度條呢

那個要做FLASH來實現。asp.net實現不了。

G. 學習通考試上傳照片沒有顯示進度條上傳成功了嗎

學習通考試上傳照片沒有顯示進度條上傳成功了。根據查詢相關資料信息顯示：照片都上傳成功了但是老師那邊設置的許可權所以看不到。學習通是由北京世紀超星信息技術發展有限責任公司於2016年開發的一款集移動教學、移動學習、移動閱讀、移動社交為一體的免費應用程序，僅支移動端。

H. QQ空間相冊上傳照片上傳不動了 進度條一直是空白 一直沒動靜 照片我已經刪過了 只能靠上傳了 但是

還沒上傳完你就把照片刪了，它拿什麼上傳

I. JSP 上傳文件進度條怎麼做

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

J. 使用jquery.form.js實現文件上傳及進度條前端代碼

ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。

需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。

去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]

將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });

[圖片上傳失敗...(image-3d6ae0-1548557865446)]

[圖片上傳失敗...(image-9f0adf-1548557865446)]

更多用法可以 參考官網