php ci上传图片,CI上传图片 · Issue #3 · Wscats/cms · GitHub

表单上传

官方文档文件上传类

这里有一点要注意的是

你需要一个目录来保存上传的图片，在 CodeIgniter 的安装根目录下创建一个 uploads 目录， 并将它的权限设置为 777

在 Mac 里面你可以这样设置 777 权限

sudo chmod -R 777 uploads

上传成功后如图

ajax 上传

参考CI 框架怎么使用 ajax 方式无刷新上传文件/图片

在这里不断尝试后发现uploadify这个插件很好解决这个问题

在 php 的视图引入，记得 uploadify 的官网下载 uploadify 插件包的没有 jquery 这个库，记得额外引入

rel="stylesheet"

href="<?php echo base_url('assets/lib/uploadify/uploadify.css');?>"

/>

表单，这里要注意的你可以放入任何表单，因为是 ajax 上传的，其实不会影响你所在的表单原来对服务器的请求，name 属性值记得跟 js 里面的值对应，跟后台对应，在上传完图片可以获取图片地址，因为 uploadify 支持上传多张图片，可以在前端拼接成一个数组，然后通过表单提交到后台

请上传图片

js 中注意获取的节点 file_upload 有没有对应上，uploader对应就是你需要发给后端处理的对应文件，由于我这里用的是 CI 框架，所以我这个路径会找到 news 控制器下的 upload_picture 方法，onUploadSuccess 方法就是图片上传成功后的回调，你可以在这里把拼接好的数组添加到对应的表单 input 图片数据的节点，让后面表单提交的时候获取该数组到后台，还有要注意的是 swf 的路径要对应上，还有上传的时候会请求一张 cancel 的图片，这个路径也要对应上

这里发现 uploadify 还会默认请求项目根目录 index 的东西，所以我在 news 控制器下设置 index 默认的方法，不然会一直看到控制台请求不了主页数据的提醒，不过不影响上传图片的功能，其实可以忽略

$(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) {

$("").appendTo("#img_url");

})

},

'onUploadError': function (file, errorCode, errorMsg, errorString) {

alert(errorString);

}

});

});

后端文件处理的方法，这个参考的就是官网的 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 的值，然后在你想保存图片的地方创建保存图片的文件夹即可