溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
摘要
1.jquery自定義插件方法
2.表單file樣式調整
3.利用formData,ajax上傳圖片
4.js,css彈出層
5.springmvc上傳圖片
效果
調用方式
$("#picUrl").imgUpload({})，在代碼內部為調用對象綁定了click事件，點擊彈出上傳界面。
$(function(){
$("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'})
$("#picUrl").imgUpload("resize");/**彈出層水平垂直居中**/
})
jquery自定義插件要點
1.定義作用域
2.$.fn.***為每個jquery對象擴展方法
3.設置默認值
4.return this.each，支持鏈式調用
/**部分代碼**/
(function($){
$.fn.imgUpload=function(options,param){
if(typeof options =="string"){
return $.fn.imgUpload.methods[options](this,param);
}
/**this為jquery對象**/
options = options || {};
return this.each(function() {
/**this 為 dom 對象**/
var state=$.data(this,"imgUploadData");
var opts;
if(state){
opts = $.extend(state.options, options);
state.options = opts;
}else{
opts = $.extend({},$.fn.imgUpload.defaults,options);
$.data(this,"imgUploadData",{options:opts});
}
init(this);
});
};
$.fn.imgUpload.methods={
resize:function(jq){
$(".main-layer").css({
left:($(window).width()-$(".main-layer").outerWidth())/2,
top:($(window).height()-$(".main-layer").outerHeight())/2
});
}
}
$.fn.imgUpload.defaults={
width:100,
height:200,
url:'#'
}
})(jQuery);
利用formData,ajax上傳文件
/**html5 formData**/
function upload(jq){
var formData=new FormData();
var opts = $.data(jq,"imgUploadData").options;
formData.append('file',$("#imgFile")[0].files[0]);
$.ajax({
url: opts.url,
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
success:function(url){
console.info(url);
},
error:function(url){
console.info(url);
}
})
}
表單file樣式調整
.main-layer .a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1 ;
width:90%;
text-align: center;
}
.a-upload input {
position: absolute;
font-size: 100px;
right:0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
js,css彈出層樣式
/***遮罩層樣式**/
.wrap-overlayer{
position: fixed;
left: 0;
top:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
z-index:10;
display:none;
}
/**上傳組件樣式**/
.main-layer{
position:absolute;
left:50%;top:50%;
background-color: #fff;
width:350px;
height: 150px;
}
后臺部分代碼
@RequestMapping(value="/upload.do",method=RequestMethod.POST)
private void fildUpload(@RequestParam(value="file",required=false) MultipartFile file,
HttpServletRequest request,HttpServletResponse resp)throws Exception{
//獲得物理路徑webapp所在路徑
String pathRoot = request.getSession().getServletContext().getRealPath("");
String path="";
if(!file.isEmpty()){
//生成uuid作為文件名稱
String uuid = UUID.randomUUID().toString().replaceAll("-","");
//獲得文件類型（可以判斷如果不是圖片，禁止上傳）
String contentType=file.getContentType();
//獲得文件后綴名稱
String imageName=contentType.substring(contentType.indexOf("/")+1);
path="/images/"+uuid+"."+imageName;
file.transferTo(new File(pathRoot+path));
}
request.setAttribute("imagesPath", path);
}
以上所述是小編給大家介紹的jQuery自定義圖片上傳插件實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
