如何在更改时将图像上传到服务器

Posted 2023-02-25

【中文标题】如何在更改时将图像上传到服务器

【英文标题】：How to upload an image to server on change

【发布时间】：2013-12-18 12:44:04

【问题描述】：

我有一个像

这样的输入标签

<form id="myForm">
<!-- has lots of inputs above like username password etc -->
<input type="file" id="user_photo" name="user_photo" tabindex="6" size="6" class="" accept="jpeg|png|jpg|gif|PNG|JPEG|GIF|JPG" >

OnChange，我想通过 AJAX 上传图像并将其保存在服务器中。保存后，它应该显示在预览 div 中，我可以在其中使用 jCrop 根据用户的意愿进行裁剪，并在用户单击提交按钮时将其再次保存到服务器（裁剪后）。

如果你有更好的方法请告诉我。

简而言之，我只想用文件内容触发一个 ajax 发布请求并将其保存到我的上传文件夹中，而不发送其余的表单元素。

我使用 codeigniter。我已经通过 valuem 尝试了 fileuploader .. 没有给我结果。

【问题讨论】：

您尝试过什么...如果是，请显示代码...

@Dk-Macadamia ：我尝试使用 valum 的插件 here

但没用/让我很困惑。所以放弃了它。如果你愿意，我会编辑并放置整个表格。！

【参考方案1】：

答案从这里被盗：Can i preview the image file who uploaded by user in the browser?

使用html5 File Api 加载图像客户端。 然后在将图像加载到标签后使用jCrop。 然后（我假设）使用 jCrops onRelease 方法进行 Ajax 调用。 这样它只有一个 ajax 调用，并且已经修改了

<img id="preview" src="placeholder.png"   />
<input type="file" name="image" onchange="previewImage(this)" accept="image/*"/>
<script type="text/javascript">      
 function previewImage(input) 
    var preview = document.getElementById('preview');
    if (input.files && input.files[0]) 
      var reader = new FileReader();
      reader.onload = function (e) 
        preview.setAttribute('src', e.target.result);
         $('#preview').Jcrop(
            onRelease: yourAjaxFunctionToSubmitToServer
         );
      
      reader.readAsDataURL(input.files[0]);
     else 
      preview.setAttribute('src', 'placeholder.png');
    
  
</script>

显然，这需要稍作修改以满足您的需要，但您明白了。