Image upload without refreshing implemented by thinkphp5+zyFile.js
- WBOYOriginal
- 2016-08-10 08:49:012134browse
thinkphp5+zyFile.js实现的图片无刷新上传
zyFile.js体更了一个很美观的上传页面，同时上传图片无需刷新，也进一步提升了用户体验。我在网上找了好多的无刷新上传的插件，感觉这个还挺不错的，就像大家推荐这一款。
ps : zyFile.js 体供的代码存在一个bug,如果你直接下的网上的代码，把175行:file.name 改为 unescape(encodeURIComponent(file.name ))html页面代码:nbsp;html><br>
<br>
<br>
<meta>
<br>
<title>html5批量上传文件</title>
<br>
<!-- 引用控制层插件样式 --><br>
<link>
<br>
<script></script><br>
<br>
<br>
<h1>html5批量上传文件</h1>
<br>
<div></div>
<br>
<script type="text/javascript"><br />
//Upload path<br />
var url = "{:url('index/upload')}";<br />
</script><br>
<!-- Reference core layer plug-in --><br>
<script src="/static/upload/core/zyFile.js"></script><br>
<!-- Reference control layer plug-in --><br>
<script src="/static/upload/control/js/zyUpload.js"></script><br>
<script type="text/javascript"> <br />
$(function(){<br />
// Initialize plug-in<br />
$("#demo").zyUpload({<br />
Width: "650px", // width <br />
Height : "400px", // Width <br />
having ’ s having ’ s ’ to having been passed to --
url,
dragDrop : true, // Is it possible to drag and upload files?
finishDel : false, false, // Whether to delete the preview after uploading the file <br />
/* Externally obtained callback interface */<br />
to
console.info("The following files are currently selected:");<br />
console.info(files);<br />
console.info("Files not uploaded before:");<br />
console.info(allFiles);<br />
},<br />
onDelete: function(file, surplusFiles){ ;
console.info("This file is currently deleted:");<br />
console.info(file);<br />
console.info("Currently remaining files:");<br />
console.info(surplusFiles);<br /> },<br />
onSuccess: function(file){ // Callback method for successful file upload<br />
console.info("This file was uploaded successfully:");<br />
console.info(file);<br />
},<br />
onFailure: function(file){ // Callback method for file upload failure<br />
console.info("This file failed to upload:");<br />
console.info(file);<br />
},<br />
onComplete: function(responseInfo){ // Callback method for upload completion<br />
console.info("File upload completed");<br />
console.info(responseInfo);<br />
}<br />
});<br />
});<br />
<br />
</script><br>
<br>
<br>
index.php code:<?php <br />
namespace appindexcontroller;<br>
<br>
use thinkController;<br>
<br>
class Index extends Controller<br>
{<br>
Public function index()<br>
{<br>
return $this->fetch();<br>
}<br>
<br>
//Main method for processing upload<br>
Public function upload()<br>
{<br>
$file = request()->file('fileList');<br>
<br>
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');<br>
if($info){<br>
// After successful upload, get upload information <br>
// Output jpg<br>
echo $info->getExtension();<br>
// Output 42a79759f284b767dfcb2a0197904287.jpg<br>
echo $info->getFilename(); <br>
}else{<br>
// Failed to upload and got error message<br>
echo $file->getError();<br>
}<br>
<br>
}<br>
}The effect is as follows:
qiniu.rar
(3.85 MB Download: 2 times)