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

Question

我有一个输入标签，例如

<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发布请求，然后将其保存到我的uploads文件夹中，而不发送其余表单元素。

我使用codeigniter。 我已经尝试过由valum进行fileuploader的操作..没有给我结果。

Answer 1

答案是从这里偷来的： 我可以预览用户在浏览器中上传的图像文件吗？

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

<img id="preview" src="placeholder.png" height="100px" width="100px" />
<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>

显然，需要对其进行一些修改以适合您的需求，但是您明白了。