上传封装代码块

来源：互联网发布：琉璃神社新域名 2017 编辑：程序博客网时间：2024/06/08 07:32

第一种上传封装js

//创建 FORM

}

第二种上传判断截取内容的大小

html:

//上传前台方法
<iframe name="fileUpload" height="0" width="0"></iframe> //在本页上传不跳转页面
<form action="http://103.37.166.4:7777/flexUpDownLoad03/fileUploadServlet" method="post" enctype="multipart/form-data" name="fileForm" target="fileUpload" charset="utf-8">

<input type="file" class="fileInput" name="fileInput" id = "uploadtest" value="" >

<input name="up" type="submit" value="上传" onclick="insertTitle(this);cleanFile()" style=" height: 30px; width: 50px;color: #da0a1c;background-color: #86d6e8;">


</form>

//js

//清空
function cleanFile(){
var file = $("#uploadtest");
file.after(file.clone().val(""));
file.remove();
}
function cleanFile2(){
var file = $("#uploadtest2");
file.after(file.clone().val(""));
file.remove();
}
function cleanFile3(){
var file = $("#uploadtest3");
file.after(file.clone().val(""));
file.remove();
}
var file_i = 0;
//上传
function insertTitle(obj){
path=$(obj).prev().val();
if(path == null || path == "")return;
var test1 = path.lastIndexOf("\\"); //对路径进行截取
var test2 = path.lastIndexOf("."); //对路径进行截取
var fileName = path.substring(test1+1,test2);
var suffix = path.substring(test2+1,path.length);
communication.files[file_i] = fileName + "." + suffix;
file_i ++;
console.info(communication.files);
var KB = 1024;
var MB = 1024*1024;
var GB = 1024*1024*1024;

/*var fileId = "uploadtest";
var dom = document.getElementById(fileId); */
var fileSize ="";
fileSize = $(obj).prev()[0].files[0].size;//文件的大小，单位为字节B
if (fileSize === 0) return '0 B';
var k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(fileSize) / Math.log(k));
fileSize = (fileSize / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
var test= Math.max(test1, test2)
var tr = "<tr class = 'delAll' onclick='setTable(this)'>"+
"<td>"+fileName+"</td>"+
"<td>"+suffix+"</td>"+
"<td>"+fileSize+"</td>"+
"</tr>";

$(".uploadTable").append(tr)
var wenjian=fileName+"."+suffix;
$("#uploadNew2").val(wenjian);
$("#xiaoxi_accessory").val(wenjian);
}
var selected="";
function setTable(obj){
selected = obj;
$(".uploadTable tr").each(function(i,dom){
$(dom).css("background-color","white");
$(dom).removeAttr("data-type");
})

$(obj).css("background-color", "gainsboro");
$(obj).attr("data-type","xsg");

var tr = $(".uploadTable tr[data-type=xsg]");

}

$(function(){
$("#delAll").click(function(){
$(".delAll").empty();
});
$("#delOne").click(function(){
// setTable(obj);
$(selected).empty();
});
/*提问-上传文件*/
$("#askpload").click(function(){
$(".askEnclosure").show(500);
$("body").addClass("overHiden");
$(".delAll").empty();
});
/*消息条-上传文件*/
$("#uploadNew").click(function(){
$(".uploadPop").show(500);
$("body").addClass("overHiden");
$(".delAll").empty();
});
///*通讯-添加附件*/
$("#addEnclosure").click(function(){
$(".addEnclosure").show(500);
$("body").addClass("overHiden");
$(".delAll").empty();
});

});

第三种隐藏input

html;

<div class="form-group">
<label for="uname" class="col-sm-2 control-label">素材文件</label>
<div class="col-sm-4">
<form action="http://127.0.0.1:8080/flexUpDownLoad03/fileUploadServlet" method="post" enctype="multipart/form-data" name="fileForm" target="test" charset="utf-8">
<input type="file" class="form-control" id="upload_file" name="upload_file"style="display: none;" onchange="change();">
<input type="text" class="form-control" id="upload_file_tmp" name="upload_file_tmp"readonly="readonly" onclick="upload_file.click(); ">


<div class="col-sm-2" >
<button style="margin-left: 278px;margin-top: -53px;" type="submit" class="btn btn-primary" id="select_file"">上传</button>
</div>
</form>
<iframe name="test" height="0" width="0"></iframe>
</div>
</div>

js;

function change(){
document.getElementById("upload_file_tmp").value=document.getElementById("upload_file").value;
}

阅读全文

0 0