隐藏文件上传按钮前面的输入框，美化文件模拟ajax上传。并预览图

一句话不割：

我们在HTML 中使用<input type='file' name='upload_image' /> 时，显示的是一个文本框和一个‘浏览’按钮，很丑，我们想把前面这个文本框去掉，行不行呢？

很丑，也很占空间

做成这样的效果

开始做：

1. 要求：改变样式，去掉文本框就可以了；选择图片后，出现预览图。

狗狗狗狗狗狗狗

第一步：美化上传按钮：(隐藏input file 用另一个button 去模拟点击事件) html前端，用iframe 模拟ajax ，

<form id="manage_frm" action="__URL__/upload" method="POST" enctype="multipart/form-data" target="upload_iframe">
   <td id="upload_td">
	<iframe id ="upload_iframe" name="upload_iframe" style="display:none"></iframe>
	<input type="button" value="请选择文件" size="30" onclick="f.click()" />
	<input type="file" id="f" onchange="this.form.submit()" name="f" style="position:absolute; filter:alpha(opacity=0);opacity:0;width:30px;"size="1" />
  </td>
  <td>
	<div id="review_pic"></div>
  </td>
</form>

注意：<iframe id='upload_iframe' name="upload_iframe"> 和 <form target="upload_iframe"> 要都有，且一致。

第二步：PHP后端接受并处理(基于thinkphp)，用的iframe 模拟ajax 技术，并将上传成功后的上传路径和上传文件名，传入前端的js 函数review_pic( ) ，有点像jsonp 。

public function upload() {
		import("@.ORG.UploadFile");
		$upload = new UploadFile();
		$upload->maxSize = 3145728; // 设置附件上传大小
		$upload->allowExts = array('jpg','png','gif'); //只允许普片格式的附件
		$upload->savePath = C('IMAGE_UPLOAD_DIR'); // 设置附件上传目录
		$upload->saveRule = 'time'; // 文件上传名
		if (!$upload->upload()) {// 上传错误提示错误信息
			echo "<script>window.parent.alert('" . $upload->getErrorMsg() . "');</script>";
		} else {// 上传成功。将上传的信息传入前端的review_pic函数
			$info = $upload->getUploadFileInfo();
			echo "<script>window.parent.review_pic('" . $info[0]['savepath'] . "','" . $info[0]['savename'] . "');</script> ";
		}
	}

第三步：前端js 接受数据，生成预览图

function review_pic(path,name){
	$("#upload_td").hide(); // 隐藏文件上传按钮
	$("input[name='upload_pic_name']").val(name); //将文件名付给一个隐藏input,便于后续的存入数据库
	var pic = IMAGE_URL+name;
	var link = "<a href='"+pic+ "'target='_blank'>";
	var html = link+"<image src='"+pic+"' width='300' height='300' title='点击预览原图' alt='专题头图'/></a>n
	<span class='upload_pic'><a href='javascript:void(0)' onclick='f.click()'>修改图片</a></span>";
	$("#review_pic").html(html);  //将图片写入预览的div 中
}

搞定。

参考借鉴：http://blog.csdn.net/rainyjune/article/details/6877975 感谢。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!