如何将图像上传到服务器上的变化

我有一个像如何将图像上传到服务器上的变化

<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按照用户的意愿裁剪，并在用户单击提交按钮时再次将其保存到服务器（裁剪后）。

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

inshort，我只想触发一个带有文件内容的ajax post请求并将它保存到我的uploads文件夹中，而不用发送剩下的表单元素。

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

来源

2013-12-18 Mohammed Ashiq

你有没有尝试过任何东西......如果是的话请显示代码... – Dinesh

@ Dk-Macadamia：我尝试使用valum的插件[here]（https://github.com/Valums-File-Uploader/file-上传者） –

但没有工作/困惑了我很多。所以放弃了。如果你想要，我会编辑并放置整个表单。 –

了答案从这里被盗：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" 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>

显然，这将需要被修改了一下，以满足您的需求，但你的想法。

来源

2013-12-18 13:13:53 WiR3D

很酷..得到它..！似乎是一个好主意..谢谢.. :-) –

如何将图像上传到服务器上的变化

回答

相关问题