ajaxfileupload+bootstrap-fileupload.js实现文件上传bug修复总结

今天下修改了一个bug 是ajaxfileupload+bootstrap-fileupload.js实现文件上传,由于ajaxFileUpload把原来的file元素替换成新的file元素造成bootstrap-fileupload.js组件失效,在此记录一下:

以下是标准的实现方式:

----------------------------------------------------

1.ajaxfileupload使用方法参见

https://www.cnblogs.com/lemonmoney/p/9493331.html

2.bootstrap-fileupload.js使用方法参见;

Select imageChange

Remove

以下是系统中的实现方式-没有修改任何代码:

----------------------------------------------------

我是通过$(oldElement).clone(true) 清除缓存就解决了问题

1.html代码

    

        

        

    

    

    

        选择图片

        修改图片

        

        删除图片

    

2.js代码

       functionupload(filePath, id, name){

              if(filePath ==''){

                    return;

               }

              varextStart = filePath.lastIndexOf('.');

              varext=filePath.substring(extStart,filePath.length).toUpperCase();


              if(ext!='.GIF'&& ext!='.JPG'&& ext!='.JPEG'&& ext!='.BMP'&& ext!='.PNG'&& ext!='.DOC'&& ext!='.XLS'&& ext!='.PDF'&& ext!='.TXT'){

                alert("文件仅限于图片或文本格式");

               $("#deleteFile").click();

               return;

               }


               $("#loading")

                    .ajaxStart(function(){

                           $(this).show();

                    })

                    .ajaxComplete(function(){

                           $(this).hide();

                    });

                    $.ajaxFileUpload

                  (

                      {

                          url:"/file/uploadPic",//用于文件上传的服务器端请求地址

                          secureuri:false,//一般设置为false

                          fileElementId:id,//文件上传空间的id属性 

                          dataType:'json',//返回值类型 一般设置为json

                          success:function(data, status) //服务器成功响应处理函数

                          {

                             //alert(data);

                             //alert(data["status"]);

                             varstatus = data["status"];

                             varmsg = data["msg"];

                             if(status =='0')

                             {

                                   //导入成功

                                   varfileName = data["fileName"];

                                   $("#"+ name).val(fileName);

                             }

                             else

                             {

                                   // 导入失败   

                                   $("#deleteFile").click();

                                   $("#msgTips").text(msg);

                             }

                          }

                      }

                  )

                    returnfalse;

        }

3.后台代码不放了



总结:

原先系统开发人员没有任何开发文档花费了将近1天的时间才解决太低效了,由此问题有如下心得:

1.接收的项目技术框架必须要明确,结合之前看到文字大方向分为:业务学习,技术学习,实战;

其中技术学习又有:逻辑架构,开发框架,运行架构,物理架构,数据架构,系统运维6个方面,交接的时候如有偏差在实战的时候解决问题将会很低效;

2.框架要查官方文档,比如bootstrap-fileupload.js的使用找到了官网(https://www.jasny.net/bootstrap/2.3.1/javascript.html#fileupload)之后根据案例很快就解决了问题,比漫无目的的百度好多了;

3.一个搜索引擎不行就换几个多试试,由于国内没有google 只能百度,时间长了习惯性用百度,这次找到bootstrap-fileupload.js的官网使用的是bing,在尝试了半天百度之后偶然的想起了用bing,以后查资料百度几次没什么帮助时,一定要换个搜索引擎试试;

4.基本功很重要,一个框架要成体系的学习,看我们项目里面的代码就是很糟糕的(使用了jquery,但是前台还有好多js原生代码,比如事件绑定),不过在项目管理角度能实现功能就行。

你可能感兴趣的:(ajaxfileupload+bootstrap-fileupload.js实现文件上传bug修复总结)