前端开发上传文件带进度条

标准的前端开发流程图
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>

html相同js不同

$(‘.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
赞(0)
64K

评论 抢沙发

评论前必须登录!