上传图片进度条
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实现带进度条的上传效果
实现在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)]
更多用法可以 参考官网