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

<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>

//修改头像

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);

}

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前端开发的整个流程

前端开发详细流程图

前端到后端开发流程