图片上传在项目中经常用到，几乎没有任何一个项目可以脱离图片或者是文件上传。本篇我在这向大家介绍两种常规的上传方式。（注：在这里我们仅仅是对功能的实现，不去做过多的前端的样式）
一、利用form表单上传
此种方式是最原始的上传方式，前端就是简单的form表单，后端我们有PHP处理传输过来的文件。
首先看前端的代码 upload.html
<form action="handle.php" name="form" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" name="submit" value="上传" /></form>
然后新建php文件 handle.php 代码如下
$file = $_FILES['file'];//得到传输的数据//得到文件名称$name = $file['name'];$type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件类型，并且都转化成小写$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型//判断文件类型是否被允许上传if(!in_array($type, $allow_type)){ //如果不被允许，则直接停止程序运行 return ;}//判断是否是通过HTTP POST上传的if(!is_uploaded_file($file['tmp_name'])){ //如果不是通过HTTP POST上传的 return ;}$upload_path = "D:/now/"; //上传文件的存放路径//开始移动文件到相应的文件夹if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){ echo "Successfully!";}else{ echo "Failed!";}当然，此php处理代码不是很完善，其中对错误的情况没有进行处理，然而使用php处理上传文件的原理就是这样的，大家可以在此基础上进行优化，使其更加完善。
二、利用uploadify实现无刷新并且带进度条的上传
首先下载uploadify插件，保存在项目中的某个文件夹下面，然后引入三个文件
<link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/uploadify/jquery.min.1.7.js"></script><script type="text/javascript" src=js/uploadify/jquery.uploadify.min.js"></script>
然后引用以下代码
<script type="text/javascript"> $(function(){ $(".uploadbutton").each(function(){ bidtype="上传"; $(this).uploadify({ swf: 'js/uploadify/uploadify.swf', uploader: "handle.php", //处理上传的php文件或者方法 multi: true, //是否开启一次性上传多个文件 queueSizeLimit:20, //最大允许上传的文件数量 buttonText: bidtype, //按钮文字 height: 34, //按钮高度 width: 82, //按钮宽度 auto:false, //选择完图片以后是否自动上传 method:'post', fileTypeExts: "*.jpg;*.png;*.gif;*.jpeg;", //允许的文件类型 fileTypeDesc: "请选择图片文件", //文件说明 postData:{}, formData: { "imgType": "normal","timestamp":"asdfsa","token":"48f262516b3912a060d21ef6af564668" }, //提交给服务器端的参数 onUploadSuccess: function (file, data, response) { //一个文件上传成功后的响应事件处理 var data = $.parseJSON(data); } }); }) }); </script><body> <span id="commercial_upload" class="uploadbutton"></span></body>
新闻热点
疑难解答
