HTML代码如下(核心部分都有代码注释):
点击(此处)折叠或打开
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <!-- <script type="text/javascript" src="jquery.js"></script> -->
- <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
- <script type="text/javascript" src="ajaxfileupload.js" ></script>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <style>
- *{
- padding:0;
- margin:0;
- }
- .file {
- position:relative;
- display: inline-block;
- border:1px solid #99D3F5;
- width: 80px;
- height: 80px;
- line-height: 80px;
- background: #D0EEFF;
- text-decoration: none;
- font-size: 80px;
- text-align: center;
- color:black;
- overflow: hidden;
- float: left;
- }
- .file input {
- position: absolute;
- left: 0;
- display: inline-block;
- height:80px;
- width:80px;
- opacity: 0;
- }
- .file:hover {
- background: #AADFFD;
- border-color: #78C3F3;
- color: #004974;
- text-decoration: none;
- }
- .img_contain img{
- width: 80px;
- height: 80px;
- position: absolute;
- }
- </style>
- </head>
- <body>
- <a href="javascript:;" class="file">+
- <input type="file" name="fileToUpload" id="fileToUpload">
- </a>
- <div style="height:80px;width:80px;border:1px solid red;float:left;" class="img_contain">
- </div>
- <script type="text/javascript">
- $(function(){
- $(".file").bind('change',function(){
- // jqurey1.9以上版本删除了live绑定事件,请用on或者bind绑定事件代替
- $.ajaxFileUpload({
- url: 'upload.php',
- secureuri: false, //一般设置为false
- fileElementId: 'fileToUpload', // 上传文件的id、name属性名
- dataType: 'json', //返回值类型,一般设置为json
- success: function(data, status){
- if(typeof(data.error) != 'undefined'){
- if(data.error != ''){
- alert(data.error);
- }else{
- $(".img_contain").html('');
//data.name为图片在服务器的路径,括号内内容会自动转化为html代码,可能会显示不出来,内容为 img src='+data.name+'; - }
- }
- },
- error: function(data, status, e){
- alert(e);
- }
- });
- })
- });
- </script>
- </body>
- </html>
点击(此处)折叠或打开
- <?php
- $res["error"] = "";//错误信息
- $res["msg"] = "";//提示信息
- $res["name"]="";//图片名
- if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"uploadimg/{$_FILES['fileToUpload']['name']}")){
- $res["msg"] = "上传成功";
- // uploadimg/$_FILES['fileToUpload']['name']为服务器图片存储路径
- $res["name"]="uploadimg/{$_FILES['fileToUpload']['name']}";
- }else{
- $res["error"] = "上传失败";
- }
- echo json_encode($res);
- ?>