心得笔记网站首页 心得笔记

dede软件模型文档实现jquery切片上传

发布时间：2018-12-15 15:09:39编辑：雪饮阅读（）

问题：

dedecms中有软件模型而该模型在文档新增界面中若你想上传本地文件则只能通过传统的非切片上传方式，那么题主这次就遇到这样的情况。

公司官网是在虚拟主机上的，不能像ecs那样直接修改各种配置，所以受限于最大单文件只能上传10M，而公司想上传的软件基本都是大于10M。。

解决：

既然单文件最大上传受限，那么只能用切片上传了，之前曾经写过一个纯javascript的切片上传demo，当时需求比较简单，所以代码逻辑也就没有那么严谨。这次逻辑较多，并用jquery实现，逻辑上也更严谨些。

(1)在路径/dede/soft_add.php所呈现的html界面中添加一个上传按钮：

<tr>

<td height="24" bgcolor="#F9FCEF" class="bline2"><strong> 本地软件选择：</strong></td>

</tr>

<tr>

<tr>

<td>

服务器名称：

</td>

</tr>

</table>

</td>

</tr>

(2)同界面中的表单里面添加一个宽、高、边框、边界、填充皆为0的的file类型按钮：

(3)在页面</body>前加入上传进度条(有点丑陋，可根据自己情况逐一修改)

#progress{

width:500px;

height:30px;

border:1px solid green;

}

#bar{

width:0%;

height:100%;

background:green;

}

#bfb{

float:right;

text-align:center;

color:pink;

}

</style>

</div>

(4)</head>前引入jquery并实现切片上传

var clock=null;

var timestamp = null;

var updateRes="";

function upOneSuccess(data){

updateRes=data;

console.log("单次切片success：");

console.log(data);

}

function upOneError(xmlHttpRequest,info,Expection){

console.log("单次切片Error：");

console.log(info);

}

//sendfile

function sendfile(){

const LENGTH=1*1024*1024;//每次切1M

var sta=0;

var end=sta+LENGTH;

var sending=false;//初始化标志上传状态为“未上传”

var blob=null;

var fd=null;

//百分比

var percent=0;

return(

function () {

if(sending==true){return;}//判断切片文件正在上传则直接返回

mov=$("#seizeAseat")[0].files[0];

//如果sta>move.size就结束了

if(sta>mov.size){clearInterval(clock);return;}//已经超过了所选文件总大小，所以不能继续进行切片上传了

blob=mov.slice(sta,end);

fd=new FormData();

fd.append('part',blob);

fd.append('timestamp',timestamp);

fd.append('fileName',mov.name);

var url="/icp/section.php";

var ajaxParse=new Object();

ajaxParse.url=url;

ajaxParse.data=fd;

ajaxParse.type="POST";

ajaxParse.dataType="json";

ajaxParse.contentType=false;

ajaxParse.async=false;

ajaxParse.processData=false;

ajaxParse.success=upOneSuccess;

ajaxParse.error=upOneError;

$.ajax(ajaxParse);

sta=end;

end=sta+LENGTH;

sending=false;//本次切片（1M）上传完

//计算百分比

percent=end*100/mov.size;

if(percent>100){

percent=100;

if(updateRes!="" && updateRes.status=="success"){

$("#softurl1").val(updateRes.data);

}

var widthStr=percent+'%';

$("#bar").css("width",widthStr);

$("#bfb").html(widthStr);

}

);

}

//初始化一些数据

$(document).ready(function(){

$("#seizeAseat").on('change',function(){

var now=new Date;

var year=now.getFullYear().toString();

var month=(now.getMonth()+1).toString();

var date=now.getDate().toString();

var hour=now.getHours().toString();

var minute=now.getMinutes().toString();

var second=now.getSeconds().toString();

timestamp=year+month+date+hour+minute;

clock=window.setInterval(sendfile(),1000);

});

function sectionUpdate(){

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

}

</script>

(5)服务端：

<?php

$result=array("status"=>"success","message"=>"","data"=>"");

$dirName=$_POST['timestamp'];

$dirPath=$_SERVER["DOCUMENT_ROOT"]."/icp/uploads/".$dirName;

$relativeDirPath="/icp/uploads/".$dirName;

if(!file_exists($dirPath)){

$mkflag=mkdir($dirPath,0777,true);

if(!$mkflag){

$result["status"]="fail";

$result["message"]=$dirPath."目录创建失败!";

exit(json_encode($result));

}

$relativePath=$relativeDirPath."/".$_POST["fileName"];

$uploadPath=$dirPath."/".$_POST["fileName"];

if(!file_exists($uploadPath)){

$moveFlag=move_uploaded_file($_FILES['part']['tmp_name'],$uploadPath);

if(!$moveFlag){

$result["status"]="fail";

$result["message"]="本次切片失败!()";

exit(json_encode($result));

}

else{

file_put_contents($uploadPath,file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);

}

$result["data"]=$relativePath;

exit(json_encode($result));

关键字词：dede,软件,切片,上传

上一篇：马哥linux运维学习笔记-DNS主从复制及区域传送

下一篇：马哥linux运维学习笔记-DHCP服务

您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

dede软件模型文档实现jquery切片上传

相关文章

您当前的位置：首页 > 学无止境 > 心得笔记网站首页心得笔记