Thinkphp實現檔案上傳與刪除
阿新 • • 發佈:2019-01-04
新增前:
新增後:
刪除後:
程式碼:
1.html
<tr>
<td style="width: 100px;text-align: right">
附件:
</td>
<td>
<div id="file1_div">選擇檔案<input type="file" name="files" id="file1" /></div>
<input type="hidden" id="filepaths" name="info[filepaths]" />
<input type="hidden" onclick="uploadImg()" value="上傳"/>
<ul id="img_list">
</ul>
</td>
</tr>
2.js
var xls = "__STATIC__/img/xls.jpg";
var txt = "__STATIC__/img/txt.jpg" ;
var zip = "__STATIC__/img/zip.jpg";
var filepathsArr = [];
$(function(){
$("#filepaths").on("click",function(){
var formData = new FormData();
formData.append("myfile", document.getElementById("file1").files[0]);
$.ajax({
url: "<{:U('Upload/uploadFels')}>" ,
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
filepathsArr.push(data);
$('#filepaths').val(filepathsArr.join(";"));
var imgurl = data;
if(data.indexOf("zip")>-1){
$("#img_list").append('<li><img class="this_fels" src="'+zip+'" alt=""/><a ><input class="delete_input" name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
}else if(data.indexOf("xls")>-1){
$("#img_list").append('<li><img class="this_fels" src="'+xls+'" alt=""/><a><input class="delete_input" name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
}else if(data.indexOf("txt")>-1){
$("#img_list").append('<li><img class="this_fels" src="'+txt+'" alt=""/><a><input class="delete_input" name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
}else{
$("#img_list").append('<li><img class="this_fels" src="'+data+'" alt=""/><a><input class="delete_input" name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i> </a></li>');
}
},
error: function () {
alert("上傳失敗!");
}
});
})
$("#file1").on("change",function(){
$("#filepaths").trigger("click");
})
})
//刪除方法
function deleteimg(e){
var parent = e.parentNode;
var parentNode = parent.parentNode
$.get("<{:U('Upload/deleteThisFels')}>",{filepaths:e.value},function(rel){
parentNode.remove();
})
}
3.THINKPHP
public function deleteThisFels(){
$data= ".".$_GET["filepaths"];
unlink($data);
dump($data);
}
public function uploadFels(){
$config = C('UPLOAD_CONFIG');
$upload = new \Think\Upload($config);
$info = $upload->upload();
if(!$info) {// 上傳錯誤提示錯誤資訊
$this->error($upload->getError());
}else{// 上傳成功
$saveFiles = array();
foreach($info as $item){
$saveFilePath = substr($config['rootPath'],1).$item['savename'];
array_push($saveFiles,$saveFilePath);
}
echo implode(";",$saveFiles);
}
}
4.css
ul,li{
list-style-type:none;
}
#file1_div{
width: 100px;
background: #ff9d02;
height: 40px;
line-height: 40px;
padding-left: 10px;
display: block;
float: left;
position: relative;
}
#file1_div input{
opacity: 0;
width: 100%;
position: absolute;
top:0;
left:0;
height: 100%;
z-index: 1;
display: block;
}
#file1_div~input{
float: left;
box-sizing: border-box;
box-shadow: none;
width: 50px;
height: 40px;
}
#img_list{
padding: 0px;
margin: 0px;
width: 100%;
float: left;
min-height: 100px;
background: #eaedf3;
}
#img_list li{
border: 1px solid #ff9d02;
box-sizing: border-box;
width: 100px;
height: 100px;
position: relative;
float: left;
}
#img_list li a{
position: absolute;
top:0;
right: 0;
line-height: 30px;
width: 30px;
text-align: center;
height: 30px;
color: #fff;
display: block;
}
#img_list li a input{
width: 100%;
position: absolute;
background-size: 100% 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
#img_list li .this_fels{
width: 100%;
height: 100%;
float: left;
}
#img_list li a i{
display: block;
width: 100%;
height: 100%;
background-size: 100% 100% ;
}