CI上传图片
Wscats opened this issue · comments
表单上传
官方文档文件上传类
这里有一点要注意的是
你需要一个目录来保存上传的图片,在 CodeIgniter 的安装根目录下创建一个 uploads 目录, 并将它的权限设置为 777
在 Mac 里面你可以这样设置 777 权限
sudo chmod -R 777 uploads
ajax 上传
参考 CI 框架怎么使用 ajax 方式无刷新上传文件/图片
在这里不断尝试后发现uploadify这个插件很好解决这个问题
在 php 的视图引入,记得 uploadify 的官网下载 uploadify 插件包的没有 jquery 这个库,记得额外引入
<script src="<?php echo base_url('assets/lib/jquery.js');?>"></script>
<script src="<?php echo base_url('assets/lib/uploadify/jquery.uploadify.js');?>"></script>
<link
rel="stylesheet"
href="<?php echo base_url('assets/lib/uploadify/uploadify.css');?>"
/>
表单,这里要注意的你可以放入任何表单,因为是 ajax 上传的,其实不会影响你所在的表单原来对服务器的请求,name 属性值记得跟 js 里面的值对应,跟后台对应,在上传完图片可以获取图片地址,因为 uploadify 支持上传多张图片,可以在前端拼接成一个数组,然后通过表单提交到后台
<form>
<input id="file_upload" name="file_upload" type="file" multiple="true" />
<!--放图片的容器-->
<p id="img_url">请上传图片</p>
<!--隐藏图片的输入框,图片成功上传才有数据,这句为了表单提交时候把图片的url提交到后台-->
<input id="img" name="image" value="" style="display: none;" /><br />
<input type="submit" name="submit" value="Create news item" />
</form>
js 中注意获取的节点 file_upload 有没有对应上,uploader对应就是你需要发给后端处理的对应文件,由于我这里用的是 CI 框架,所以我这个路径会找到 news 控制器下的 upload_picture 方法,onUploadSuccess 方法就是图片上传成功后的回调,你可以在这里把拼接好的数组添加到对应的表单 input 图片数据的节点,让后面表单提交的时候获取该数组到后台,还有要注意的是 swf 的路径要对应上,还有上传的时候会请求一张 cancel 的图片,这个路径也要对应上
这里发现 uploadify 还会默认请求项目根目录 index 的东西,所以我在 news 控制器下设置 index 默认的方法,不然会一直看到控制台请求不了主页数据的提醒,不过不影响上传图片的功能,其实可以忽略
<script type="text/javascript">
<?php $timestamp = time();?>
$(function () {
var imgArr = [];
$('#file_upload').uploadify({
'formData': {
'timestamp': '<?php echo $timestamp;?>',
'token': '<?php echo md5('unique_salt'.$timestamp);?>'
},
'swf': '<?php echo base_url('assets/lib/uploadify/uploadify.swf');?>',
'uploader': 'upload_picture',
'onUploadSuccess': function (file, data, response) {
imgArr.push("http://localhost/CI/myCi/uploads/" + file.name);
$('#img').val(imgArr);
//每次渲染前清空容器,让新的图片重新渲染
$("#img_url").text("");
//遍历渲染图片显示
$.each(imgArr, function (index, data) {
$("<img src=" + data + " />").appendTo("#img_url");
})
},
'onUploadError': function (file, errorCode, errorMsg, errorString) {
alert(errorString);
}
});
});
</script>
后端文件处理的方法,这个参考的就是官网的 uploadify.php 的写法,把它全部放进你对应控制器的方法中即可
//上传图片 使用uploadify插件
public function upload_picture()
{
//记得更改目录位置,对应服务器的根目录,即htdocs为跟目录文件夹
$targetFolder = '/CI/myCi//uploads'; // Relative to the root
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath, '/') . '/' . $_FILES['Filedata']['name'];
// Validate the file type
$fileTypes = array('jpg', 'jpeg', 'gif', 'png'); // File extensions
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array($fileParts['extension'], $fileTypes)) {
move_uploaded_file($tempFile, $targetFile);
echo '1';
} else {
echo 'Invalid file type.';
}
}
}
记得修改$targetFolder 的值,然后在你想保存图片的地方创建保存图片的文件夹即可