今天下修改了一个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使用方法参见；
<divclass="fileupload fileupload-new"data-provides="fileupload">
<divclass="fileupload-new thumbnail"style="width:200px;height:150px;"><imgsrc="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image"/></div>
<divclass="fileupload-preview fileupload-exists thumbnail"style="max-width:200px;max-height:150px;line-height:20px;"></div>
<div>
<spanclass="btn btn-file"><spanclass="fileupload-new">Select image</span><spanclass="fileupload-exists">Change</span><inputtype="file"/></span>
<ahref="#"class="btn fileupload-exists"data-dismiss="fileupload">Remove</a>
</div>
</div>
以下是系统中的实现方式-没有修改任何代码：
----------------------------------------------------
我是通过$(oldElement).clone(true) 清除缓存就解决了问题
1.html代码
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="<p:resContextPath/>theme/image/AAAAAA&text=no+image" alt="" />
<img id="loading" src="<p:resContextPath />js/ajaxfileupload/loading.gif" style="display:none;"/>
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">选择图片</span>
<span class="fileupload-exists">修改图片</span>
<input id="portraitFileID" name="file" type="file" class="default" onchange="upload(this.value, 'portraitFileID', 'portraitFileName')"/></span>
<a id="deleteFile" href="#" class="btn fileupload-exists" data-dismiss="fileupload">删除图片</a>
</div>
</div>
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属性 <input type="file" id="file" name="file" />
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原生代码，比如事件绑定），不过在项目管理角度能实现功能就行。
网友评论