HTML& PHP& JS - 预览图像

时间:2016-11-18 09:05:47

标签: javascript php jquery html

我需要在从输入按钮类型=文件中选择图像后发布到php页面,我不知道它是怎么做的。

我正在尝试使用jquery.redirect,但它不起作用。这可能是另一种解决方案吗?

要点:

1)用户从输入按钮type = file中选择图像。 2)这个图像我想发布到另一个php页面,进行处理。 3)在此之后,我将在处理后的初始页面中再次显示该图像。

初始页面的html代码:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebCam UI</title>

      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link href="assets/css/custom-sugar-style.css" rel="stylesheet">

    <script src="assets/jquery/jquery.min.js"></script>
    <script src="assets/jquery/jquery.redirect.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

  <script language="JavaScript" type="text/javascript">
    function HandleBrowseClick()
    {
      var fileinput = document.getElementById("browse");
      fileinput.click();

     }

    function previewFile() {
      var preview = document.querySelector('img');
      var file    = document.querySelector('input[type=file]').files[0];
      var reader  = new FileReader();

      reader.addEventListener("load", function () {
        preview.src = reader.result;
      }, false);

      if (file) {
        reader.readAsDataURL(file);

        $.redirect('tosquare.php', {'image1': file});       // Include script in function redirect
      }
    }

  </script>



    <div class="container-fluid">

        <div class="row">

            <div class="col-md-12 text-center">
                     <img id='imageCamera' class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
          </div>

        </div>

      <div class="row">

          <div class="col-md-12 text-center">
            <form action="tosquare.php" method="post">
              <input type="file" id="browse" name="fileupload" onchange="previewFile()" style="display: none"/>
              <input type="button" value="Fes una foto" id="fakeBrowse" onclick="HandleBrowseClick();"/>
            </form>
          </div>

      </div>

</body>

在这一行$.redirect('tosquare.php', {'image1': file}); // Include script in function redirect中我想用image1参数发布到tosquare.php。

你能帮帮我吗?

谢谢!

0 个答案:

没有答案