ajax异步上传图片，超级简单示例

准备工作jquery.js以及uploadify的包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="js/image.js"></script>
    <link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">
</head>
<body>
<form method="post" enctype="multipart/form-data">
    <input id="file_upload"  type="file" multiple="true" >
    <img style="display: none" id="upload_org_code_img" src="" width="150" height="150">
    <input id="file_upload_image" name="logo" type="hidden" multiple="true" value="">
</form>
</body>
</html>

php页面，这里只做了简单的返回

<?php 
header('Content-Type:application/json; charset=utf-8'); 
    if(!empty($_FILES)){
$_FILES["file"]["name"]= time().'.jpg';
    }
      move_uploaded_file($_FILES["file"]["tmp_name"],
        "files/" . $_FILES["file"]["name"]);
      $array = [
          'code'=>'1',
          'success'=>'成功',
          'data' => 'http://localhost/AjaxImageUpload/success/files/'.$_FILES["file"]["name"],
      ];
      echo json_encode($array,true);
 ?>

js代码

$(function() {
    $("#file_upload").uploadify({
        'swf'             : 'http://localhost/AjaxImageUpload/success/js/uploadify/uploadify.swf',
        'uploader'        : 'http://localhost/AjaxImageUpload/success/up.php',
        'buttonText'      : '图片上传',
        'fileTypeDesc'    : 'Image files',
        'fileObjName'     : 'file',
        'fileTypeExts'    : '*.gif; *.jpg; *.png',
        'onUploadSuccess' : function(file, data, response) {
            console.log(file);
            console.log(data);
            console.log(response);
            if(response) {
                var obj = JSON.parse(data);
                $("#upload_org_code_img").attr("src", obj.data);
                $("#file_upload_image").attr("value", obj.data);
                $("#upload_org_code_img").show();
            }
        }
    });
});

如上，就实现了简单的异步上传并显示缩略图

 

posted @ 2018-06-25 16:53  浮生_若梦丶  阅读(550)  评论(0)  编辑  收藏  举报