Image upload is often used in projects, and almost no project can be separated from image or file upload. In this article, I will introduce to you two conventional upload methods. (Note: Here we are only implementing the functions and not doing too many front-end styles)
1. Use form to upload
This method is the most original upload method. The front end is a simple form, and at the back end we have PHP to process the transferred files.
First look at the front-end code 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>
Then create a new php file handle.php with the following code
$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!"; }
Of course, this PHP processing code is not very complete, and error situations are not handled. However, the principle of using PHP to process uploaded files is like this. You can optimize it on this basis to make it more perfect.
2. Use uploadify to achieve upload without refresh and with progress bar
First download the uploadify plug-in, save it under a folder in the project, and then introduce three files
<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>
Then quote the following code
<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>
The style is as follows
Of course I have changed the style of this button. You can modify the style file according to your needs and change the style of this button
The same php code handle.php
$file = $_FILES['Filedata'];//得到传输的数据 //得到文件名称 $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!"; }
It can be said that the principles of PHP processing are the same for the above two methods of uploading, except that the style displayed on the front desk is different. The second method is no refresh and has a return value, which can facilitate us to do other processing. Although it is commonly used, it is always limited and not very flexible to use.
As the development of HTML5 becomes more and more mature, we can use some methods in h5 to implement the upload function. At this time, the background PHP processing code is completely different from the above two methods, and it is very flexible to use. Due to space limitations, I will not introduce this method to you in this article. If you are interested, you can refer to the php html5 tutorial for uploading images without refreshing . I hope you will like it.