Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 157453
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
jquery+php+ajaxfileupload实现图片上传

分类： JavaScript

2016-05-18 14:40:14

截图如下:


HTML代码如下(核心部分都有代码注释):

点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. <!-- <script type="text/javascript" src="jquery.js"></script> -->
  7. <script src=""></script>
  8. <script type="text/javascript" src="ajaxfileupload.js" ></script>
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  10.     <style>
  11. *{
  12.     padding:0;
  13.     margin:0;
  14.   }
  15. .file {
  16.     position:relative;
  17.     display: inline-block;
  18.     border:1px solid #99D3F5;
  19.     width: 80px;
  20.     height: 80px;
  21.     line-height: 80px;
  22.     background: #D0EEFF;
  23.     text-decoration: none;
  24.     font-size: 80px;
  25.     text-align: center;
  26.     color:black;
  27.     overflow: hidden;
  28.     float: left;
  29. }
  30. .file input {
  31.     position: absolute;
  32.     left: 0;
  33.     display: inline-block;
  34.     height:80px;
  35.     width:80px;
  36.     opacity: 0;
  37. }
  38. .file:hover {
  39.     background: #AADFFD;
  40.     border-color: #78C3F3;
  41.     color: #004974;
  42.     text-decoration: none;
  43. }
  44. .img_contain img{
  45.   width: 80px;
  46.   height: 80px;
  47.   position: absolute;
  48. }
  49.     </style>
  50. </head>
  51. <body>
  52.     <a href="javascript:;" class="file">+
  53.     <input type="file" name="fileToUpload" id="fileToUpload">
  54.   </a>
  55.     <div style="height:80px;width:80px;border:1px solid red;float:left;" class="img_contain">

  57.     </div>
  58. <script type="text/javascript">
  59.     $(function(){
  60.        $(".file").bind('change',function(){
  61.             // jqurey1.9以上版本删除了live绑定事件，请用on或者bind绑定事件代替
  62.             $.ajaxFileUpload({
  63.             url: 'upload.php',
  64.             secureuri: false, //一般设置为false
  65.             fileElementId: 'fileToUpload', // 上传文件的id、name属性名
  66.             dataType: 'json', //返回值类型，一般设置为json
  67.             success: function(data, status){
  68.                 if(typeof(data.error) != 'undefined'){
  69.                     if(data.error != ''){
  70.                         alert(data.error);
  71.                     }else{
  72.                         $(".img_contain").html('');
                //data.name为图片在服务器的路径，括号内内容会自动转化为html代码，可能会显示不出来，内容为 img src='+data.name+';

  73.                     }
  74.                 }
  75.             },
  76.             error: function(data, status, e){
  77.                 alert(e);
  78.             }
  79.             });
  80.        })
  81.     });
  82.     </script>
  83. </body>
  84. </html>
PHP代码如下(文件名为upload.php):

点击(此处)折叠或打开

  1. <?php
  2. $res["error"] = "";//错误信息
  3. $res["msg"] = "";//提示信息
  4. $res["name"]="";//图片名
  5. if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"uploadimg/{$_FILES['fileToUpload']['name']}")){
  6.     $res["msg"] = "上传成功";
  7.     // uploadimg/$_FILES['fileToUpload']['name']为服务器图片存储路径
  8.     $res["name"]="uploadimg/{$_FILES['fileToUpload']['name']}";

  10. }else{
  11.     $res["error"] = "上传失败";
  12. }
  13. echo json_encode($res);
  14. ?>
阅读(2277) | 评论(0) | 转发(0) |
0

上一篇：JS实现手机触屏移动图片事件的两种方法

下一篇：CSS实现截图和放大镜效果

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6