ajax 上传图片进度条,ajax实现图片上传与进度条

这里使用的是bootstract的一个插件来实现

引入必要的文件

页面结构

aria-valuemin="0" aria-valuemax="100" style="width: 45%">

45% Complete

js代码

注意其中onprogress事件需要卸载send之上，否则不会响应

let pic = document.getElementById('Pic');

pic.onchange = function () {

let fd = new FormData();

let long = document.querySelector('.progress-bar')

fd.append('pic', this.files[0]);

let xhr = new XMLHttpRequest();

xhr.open('post', 'http://127.0.0.1:8080/uploadHeadImg');

xhr.upload.onprogress = function(e){

long.style.width = e.loaded/e.total*100+'%'

console.log(e.loaded/e.total*100+'%')

}

xhr.send(fd);

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

let response = xhr.responseText

if (xhr.getResponseHeader('Content-Type').indexOf('json') !== -1) {

response = JSON.parse(xhr.responseText)

}

}

}

}

一般处理程序、Ajax多图片上传带进度条

   

ajax异步文件上传和进度条

一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传

MVC 图片上传 带进度条(转)

MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...

bootstarp 多图片上传 带进度条

前台代码如下:

图片上传的进度条-jquery

Android 判断现在系统存储器是“手机存储”还是“SD存储”

import android.os.storage.StorageManager; String fileDir = null;            StorageManager storageMa ...

再次踩bug:遍历删除list(java.util.ConcurrentModificationException)

再次踩bug:遍历删除list(java.util.ConcurrentModificationException) 使用 List list = new ArrayList& ...

checking it the current os is a 32bit or 64bit version 检查操作系统是32位还是64位

) { Console.WriteLine("32bit os"); } ) { Console.WriteLine("64bit os"); }

Java获取本机MAC地址

为什么写这个呢?因为前几天看见网上有采用windows命令获取局域网和广域网MAC,查了查可以直接用JDK的方法. MAC可用于局域网验证,提高安全性. import java.net.InetAdd ...

webstoem自动编译less文件

去node的主页下载对应版本的nodejs然后安装下载地址:http://nodejs.org/   根据自己的系统选择合适的版本下载. 安装完成之后打开命令提示符(win+r 输入cmd 回车),分 ...

WPF基础篇之控件模板(ControlTemplate)

WPF中每一个控件都有一个默认的模板,该模板描述了控件的外观以及外观对外界刺激所做出的反应.我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件. 与Style不同,Style只能改变控件 ...

Web API之基于H5客户端分段上传大文件

http://www.cnblogs.com/OneDirection/articles/7285739.html 查询很多资料没有遇到合适的,对于MultipartFormDataStreamPro ...