AJAX异步上传，用第三方的组件实现，首先下载一个jQuery 的Ajax文件上传的组件，下载地址为：http://www.phpletter.com/，下载完毕解压找到ajaxfilemanagerv1.1\ajaxfilemanager\jscripts中的ajaxfileupload.js。
?
下面是本人YII项目中的测试例子
?
【controllers】
??? public function actionToolsUpload() {
??????? $this->render("toolsUpload", array("promptData" => ""));
??? }
??? function actionUpload() {
??????? if (!empty($_FILES['img']['tmp_name'])) {
??????????? //echo json_encode(array('file_infor' => dirname(__FILE__)));exit;
??????????? //$dirs = dirname(__FILE__);???????????
??????????? /* 设定上传目录 */
??????????? $uploads_dir = getcwd() . '\img\uploads';
??????????? $uploads_dir = str_replace("\\","/",$uploads_dir);
//??????????? chdir($uploads_dir);//转换新地址为当前目录,测试完关闭，不然无法正常上传
//??????????? getcwd()? //打印出新目录的绝对地址
??????????? /* 检测上传目录是否存在 */
??????????? if (!is_dir($uploads_dir) || !is_writeable($uploads_dir)) {
??????????????? if (!mkdir($uploads_dir, 0777)) {
??????????????????? echo json_encode(array('file_infor' => "mkdir error"));
??????????????????? exit;
??????????????? }
??????????? }
??????????? /* 设置允许上传文件的类型 */
??????????? $allow_type = array("image/jpg", "image/jpeg", "image/png", "image/pjpeg", "image/gif", "image/bmp", "image/x-png");
??????????? $get_img_type = $_FILES['img']['type'];
??????????? if (!in_array($get_img_type, $allow_type)) {
??????????????? echo json_encode(array('file_infor' => "图片格式不对，请重新上传!"));
??????????????? exit;
??????????? }
??????????? /* 设置文件名为"日期_文件名" */
??????????? date_default_timezone_set('PRC');
??????????? $newName = date("YmdHis") . "_" . $_FILES['img']['name'];
??????????? $path = $uploads_dir . '/' . $newName;
??????????? /* 移动上传文件到指定文件夹 */
??????????? $state = move_uploaded_file($_FILES['img']['tmp_name'], $path);
??????????? $imgsrc = 'img/uploads/' . $newName;
??????????? if ($state) {
??????????????? $message = "文件上传成功!";
??????????????? $message .= "文件名：" . $newName . "";
??????????????? $message .= "大小：" . ( round($_FILES['img']['size'] / 1024, 2) ) . " KB";
??????????? } else {
??????????????? /* 处理错误信息 */
??????????????? switch ($_FILES['img']['error']) {
??????????????????? case 1 : $message = "上传文件大小超出 php.ini:upload_max_filesize 限制";
??????????????????? case 2 : $message = "上传文件大小超出 MAX_FILE_SIZE 限制";
??????????????????? case 3 : $message = "文件仅被部分上传";
??????????????????? case 4 : $message = "没有文件被上传";
??????????????????? case 5 : $message = "找不到临时文件夹";
??????????????????? case 6 : $message = "文件写入失败";
??????????????? }
??????????? }
??????????? echo json_encode(array('file_infor' => $message, 'imgsrc' => $imgsrc));
??????????? exit;
??????? } else {
??????????? echo json_encode(array('file_infor' => 'false'));
??????? }
??? }
?
【views】
1、上传页
??????????????? <div class="control-group">
??????????????????????? <label class="control-label" for="">图片：</label>
??????????????????????? <div class="controls">
??????????????????????????? <div style="float: left;">
??????????????????????????? <input type="text" class="input-small" id="editModalTextEditUpfile" style="height: 20px"></div>
??????????????????????????? <div style="float: left;">
??????????????????????????? <iframe scrolling="no" src="<?php echo $this->createUrl('/toolsManagement/toolsUpload'); ?>" name="uploadIframe" style="width:200px; height:32px; padding: 0; border: 0px;"></iframe></div>
??????????????????????? </div>
??????????????????? </div>
2、子框架
<html lang="en">
??? <head>
??????? <meta charset="utf-8">
??????? <script type="text/javascript" src="/bms/js/tools/jquery.js"></script>
??????? <script type="text/javascript" src="/bms/js/tools/ajaxfileupload.js"></script>
??????? <script type="text/javascript">
??????????? function ajaxFileUpload()
??????????? {
??????????????? $.ajaxFileUpload
??????????????????????? (
??????????????????????????????? {
??????????????????????????????????? url: '/bms/toolsManagement/upload',?
??????????????????????????????????? secureuri: false,
??????????????????????????????????? fileElementId: 'img',
??????????????????????????????????? dataType: 'json',
??????????????????????????????????? success: function(data)
??????????????????????????????????? {
??????????????????????????????????????? alert(data.file_infor);
??????????????????????????????????????? // console.log(data.file_infor);???????????????????????????????? window.parent.document.getElementById('editModalTextEditUpfile').value=data.imgsrc;
??????????????????????????????????? }
??????????????????????????????? }
??????????????????????? );
??????????????? return false;
??????????? }
??????? </script>
??? </head>
??? <body style="margin-top: 0px; padding: 0px">
???????
??????? <input id="img" type="file" size="45" name="img" style="width:65px;height:30px;">
??????? <input type="button" onclick="return ajaxFileUpload();" value="上传" style="width:45px;height:30px;">
??? </body>
</html>
相关文章
