前端开发上传文件带进度条
摘要： 标准的前端开发流程图 web前端交互开发流程 前端开发管理流程图 上传文件 优化样式 <div class=”row c-row js-ledger-show” id=”divFile”> <label for=”……
| 标准的前端开发流程图 |
| web前端交互开发流程 |
| 前端开发管理流程图 |
上传文件 优化样式
<div class=”row c-row js-ledger-show” id=”divFile”>
<label for=”name” class=”c-row-item__label c-row-item__label_requiredIsPass”
>选择附件</label
>
<div class=”c-row-item__content”>
<div class=”c-row-input a-upload”>
<div class=”showFileName”>请选择附件</div>
<input
type=”file”
rows=”2″
class=”c-row-input__inner”
name=”appendix.documentFile”
id=”documentFileAddInput”
/>
<input
type=”hidden”
name=”appendix.documentFileExt”
id=”documentFileExtAddInput”
/>
<input
type=”hidden”
name=”appendix.documentFileName”
id=”documentFileNameAddInput”
/>
</div>
<!–进度条标签–>
<progress
value=”0″
max=”100″
id=”progress”
style=”height: 20px; width: 100%”
></progress>
<div class=”c-row–item__error”></div>
</div>
</div>
$(‘.a-upload’).on(‘change’, “input[type=’file’]”, function() {
var filePath = $(this).val() //获取完整路径
var arr = filePath.split(‘\\’) //切文件名
var fileName = arr[arr.length – 1] //获得文件名称
$(‘.showFileName’).html(fileName) //把文件名显示出来
})
上传文件有进度条 根据文件大小来跑进度条
代码其实都差不多 根据自己的需求和样式做了一些修改
<script type=”text/javascript”>
$(function() {
//上传文件 优化样式 进度条
$(‘.a-upload’).on(‘change’, “input[type=’file’]”, function() {
//获取file对象
var domFile = $(this)
var domForm = $(‘#appendixAddForm’)[0]
//将form对象直接作为参数 new FormData对象
var formData = new FormData(domForm)
//追加file 对象
formData.append(‘file’, domFile)
//截取名称
var filePath = $(this).val()
var arr = filePath.split(‘\\’)
var fileName = arr[arr.length – 1]
formData.append(‘fileName’, fileName)
$.ajax({
url:
‘appendixAction!eachJsonUploadFile.action?appendix.institution.institutionId=’ +
‘${institutionId }’,
type: ‘POST’,
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = jquery.ajaxSettings.xhr()
xhr.upload.onload = function() {
$(‘.showFileName’).html(‘读取成功 ‘ + fileName)
}
xhr.upload.onprogress = function(ev) {
console.log(ev)
if (ev.lengthComputable) {
var percent = (100 * ev.loaded) / ev.total
//console.log(percent,ev)
//进度条动画
$(‘.showFileName’).html(‘正在上传 ‘ + fileName)
$(‘#progress’).val(percent)
}
}
return xhr
},
success: function(data) {
//连接成功结束
$(‘.showFileName’).html(‘上传完成 ‘ + fileName)
},
})
})
})
</script>
JAVA
//修改头像
publicvoideachJsonUpdatePicture(){
try{
if(employee.getRole()==null||employee.getRole().getRoleId()==null)
employee.setRole(null);
StringcropData=request.getParameter(“cropData”);
if(cropData ==null){
EmployeeemployeeNew=newEmployee();
employeeNew.setEmployeeId(employee.getEmployeeId());
employeeNew=employeeService.queryOne(employeeNew);
employeeNew.setPicture(employee.getPicture());
employeeService.update(employeeNew);
}else{
JSONObjectjsonCropData=newJSONObject(cropData);
Stringinitw=request.getParameter(“initw”);
Stringinith=request.getParameter(“inith”);
if(initw!=null&&inith!=null){
employeeService.updatePicture(employee,jsonCropData.getInt(“x”),jsonCropData.getInt(“y”),Integer.parseInt(inith),Integer.parseInt(initw));
}else{
employeeService.updatePicture(employee,jsonCropData.getInt(“x”),jsonCropData.getInt(“y”),jsonCropData.getInt(“h”),jsonCropData.getInt(“w”));
}
EmployeeemployeeNew=newEmployee();
employeeNew.setEmployeeId(employee.getEmployeeId());
employeeNew=employeeService.queryOne(employeeNew);
this.request.getSession().setAttribute(“currentUser”, employeeNew);
}
JSONObjectjsonResponse=newJSONObject();
jsonResponse.put(“result”,”success”);
jsonResponse.put(“message”,”修改’员工’成功！”);
HttpJsonUtil.writeJsonData(response, jsonResponse);
OperateLogoperateLog=newOperateLog();
operateLog.setOperator((Employee)request.getSession().getAttribute(“currentUser”));
operateLog.setLogType(5);
operateLog.setHappenTime(newDate());
operateLog.setLogContent(“修改’员工’成功！”);
employeeService.saveOrUpdate(operateLog);
}catch(CurrentException ce){
JSONObjectjsonResponse=newJSONObject();
try{
jsonResponse.put(“result”,”failed”);
jsonResponse.put(“message”,ce.getMessage());
HttpJsonUtil.writeJsonData(response, jsonResponse);
}catch(Exception e1){
e1.printStackTrace();
}
OperateLogoperateLog=newOperateLog();
operateLog.setOperator((Employee)request.getSession().getAttribute(“currentUser”));
operateLog.setLogType(5);
operateLog.setHappenTime(newDate());
operateLog.setLogContent(“操作’员工’异常,”+ce.getMessage());
employeeService.saveOrUpdate(operateLog);
}catch(Exception ex){
ex.printStackTrace();
JSONObjectjsonResponse=newJSONObject();
try{
jsonResponse.put(“result”,”failed”);
jsonResponse
.put(“message”,”发生异常！”);
HttpJsonUtil.writeJsonData(response, jsonResponse);
}catch(Exception e1){
e1.printStackTrace();
}
OperateLogoperateLog=newOperateLog();
operateLog.setOperator((Employee)request.getSession().getAttribute(“currentUser”));
operateLog.setLogType(5);
operateLog.setHappenTime(newDate());
operateLog.setLogContent(“操作’员工’异常！”);
employeeService.saveOrUpdate(operateLog);
}
1、删除原头像
2、进行图片压缩保存操作
public void updatePicture(Employee employee,int x,int y,int h,int w) throws Exception {
employeeDao.queryForUpdate(employee);
EmployeeemployeeNew=newEmployee();
employeeNew.setEmployeeId(employee.getEmployeeId());
employeeNew = employeeDao.queryOne(employeeNew);
employeeNew.setPicture(employee.getPicture());
if(employee.getPicture()==null||employee.getPicture().isEmpty()){
FileUtil.DeleteFile(ServletActionContext.getServletContext().getRealPath(“/upload/images/employee/”)+”/”+employee.getPictureOld());
}
if(employee.getPictureFile()!=null){
FileUtil.DeleteFile(ServletActionContext.getServletContext().getRealPath(“/upload/images/employee/”)+”/”+employee.getPicture());
Stringfilename=”employeePicture_”+employee.getEmployeeId()+”.jpg”;//employee.getPictureFileExt();
InputStreamis=newFileInputStream(employee.getPictureFile());
//FileOutputStream fos = new FileOutputStream(new File);
Filefile=newFile(ServletActionContext.getServletContext().getRealPath(“/upload/images/employee/”),
filename);
FileUtil.SaveUploadFile(employee.getPictureFile(),ServletActionContext.getServletContext().getRealPath(“/upload/images/employee/”),
filename);
ImageUtil.cutImage(employee.getPictureFile(),file,x,y,h,w);
ByteArrayOutputStreamoutputStream=null;
ByteArrayInputStreamswapStream=null;
OutputStreamoutput=null;
try{
outputStream = CompressImage.compressImage(file,150, 150, (double)0);
swapStream = new ByteArrayInputStream(outputStream.toByteArray());
//第2步：通过子类实例化父类对象
output = new FileOutputStream(file);//通过对象多态性，进行实例化
//第3步：进行写操作
byte[]buffer=newbyte[1024];
intlen=0;
while((len =swapStream.read(buffer))!=-1){
output.write(buffer,0, len);
output.flush();
}
}catch(Exception e){
e.printStackTrace();
}finally{
try{
if(outputStream!=null){
outputStream.close();
outputStream = null;
}
}catch(Exception e){
}
try{
if(swapStream!=null){
swapStream.close();
swapStream = null;
}
}catch(Exception e){
}
try{
if(output!=null){
output.close();
output = null;
}
}catch(Exception e){
}
}
employeeNew.setPicture(filename);
}
| web前端开发的整个流程 |
| 前端开发详细流程图 |
| 前端到后端开发流程 |
» 本文来自：前端开发者 » 《前端开发上传文件带进度条》
» 本文链接地址：https://www.rokub.com/7776.html
» 您也可以订阅本站：https://www.rokub.com
近期评论