CI上传图片

[enoyao]

表单上传

官方文档文件上传类
这里有一点要注意的是
你需要一个目录来保存上传的图片，在 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 的值，然后在你想保存图片的地方创建保存图片的文件夹即可