利用fileupload插件实现图片上传

需求

在网页上传一张图片，上传成功之后，显示在页面上，可以支持拖拽上传

异步的上传，不会覆盖原来的页面

步骤

(1)前端提交文件
(2)php后台存储文件，把路径响应给前端
(3)前端接收路径

php后台代码

主要搞前端的，这部分代码略过

<?php 
  //解决跨域问题
  header("Access-Control-Allow-Origin:*"); 
  $data = $_FILES;
  //通过network下的preview查看,文件名和路径
  $filename = $data['files']['name'][0];
  $tmp = $data['files']['tmp_name'][0];
  //拼接的时候不要写成 +
  move_uploaded_file($tmp,'./images/'.$filename);
   $url = './images/'.$filename;
  $array = array("url"=>$url);
 // echo '{"url":'.'"./images/'.$filename.'"}';
  echo json_encode($array);
?>

前端代码

jquery插件集合可去 www.jq22.com/查看

    <input id="fileupload" type="file" name="files[]" data-url="http://localhost/14.php" multiple></br>
    //引入四个依赖包，顺序不要打乱
    <script src='./jquery/jquery.min.js'></script>
    <script src='./jquery/jquery.ui.widget.js'></script>
    <script src='./jquery/jquery.iframe-transport.js'></script>
    <script src='./jquery/jquery.fileupload.js'></script>
    <script>
        $(function() {
            $('#fileupload').fileupload({
                //发现done函数没有callback，经过一番折腾，找到问题原因，是由于dataType: ‘json’造成的，改为autoUpload: true问题解决。
                autoUpload: true,
                done: function(e, data) {
              // console.log(JSON.parse(data.result));
                    let img = document.createElement('img')
                    img.src = JSON.parse(data.result).url
                    document.body.append(img)
                    $('img').addClass('img')
                },
            });
        });
    </script>

css代码

    <style>
        .img {
            float: left;
            margin-left: 10px;
            height: 200px;
            width: 200px;
        }
    </style>

效果预览