Question

在使用JavaScript库上传图像之前，我正在调整图像大小，链接位于此处https://gist.github.com/dcollien/312bce1270a5f511bf4a，它已成功创建了Blob。我的html表单位于：

<form action="/" class="data-form" method="POST" enctype="multipart/form-data">
            <table>
        <tr>
        <td><?php echo $form['title']->renderLabel(); ?> </td>
        <td><?php echo $form['title']->render(); ?>
        <?php   echo $form['title']->renderError(); ?>
        </td>
      </tr>

      <tr>
        <td><?php echo $form['patient_name']->renderLabel(); ?> </td>
        <td><?php
          echo $form['patient_name']->render();
          echo $form['patient_name']->renderError(); ?>
        </td>
      </tr>
    <tr>
        <td><?php echo $form['thumbnail']->renderLabel(); ?> </td>
        <td><?php
          echo $form['thumbnail']->render();
          echo $form['thumbnail']->renderError(); ?>
        </td>
          <td><img id="preview">
          </td>
    </tr>
  <input class="button" type="Submit" value="Save" />
  </form>

我的JavaScript代码在这里：

<script>
document.getElementById('clinic_stories_thumbnail').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 300, // maximum width
        height: 250 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        $("#clinic_stories_thumbnail").attr('value',blob);
    });
};

我对如何将大小调整后的Blob上传到服务器感到困惑。我已经通过其value属性将blob附加了输入字段。但是该字段没有得到此信息，并且表单是与原始图像一起提交的。我不想为Blob提交单独的请求。我想使用现有的发布请求将Blob提交到服务器。

图片调整JavaScript大小时出现错误

0 个答案: