通过jQuery ajax提交包含文件上传的表单

时间:2015-05-28 16:33:32

标签: php jquery html

HTML:

<input type="text" name="description">
<input type="file" name="image" accept=".jpg">

如何使用$.ajax上传图片和文字值?生成一个提交文本数据的对象没有问题,但不知道从图像开始的位置。

我正在使用PHP服务器端,因此使用base64或类似方法对图像进行编码是完全可以接受的。

2 个答案:

答案 0 :(得分:1)

最简单的方法是使用FormData()类:

所以现在你有一个FormData对象,随时可以与XMLHttpRequest一起发送。并使用FormData Object附加字段

<script type="text/javascript">
           $(document).ready(function () {
               var form = $('form'); //valid form selector
               form.on('submit', function (c) {
                   c.preventDefault();

                   var data = new FormData();
                   $.each($(':input', form ), function(i, fileds){
                       data.append($(fileds).attr('name'), $(fileds).val());
                   });
                   $.each($('input[type=file]',form )[0].files, function (i, file) {
                       data.append(file.name, file);
                   });
                   $.ajax({
                       url: '/post_url_here',
                       data: data,
                       cache: false,
                       contentType: false,
                       processData: false,
                       type: 'POST',
                       success: function (c) {
                            //code here if you want to show any success message
                       }
                   });
                   return false;
               });
           })
</script>

并强制jQuery不为您添加Content-Type标头,否则将丢失上传文件边界字符串。

答案 1 :(得分:0)

使用jQuery表单js使用ajax上传图像。

检查https://github.com/malsup/form/

var options = {
   url     : 'url',
   success : function(responseText) { "event after success "}
};

$(" form id ").ajaxSubmit(options);

并在php文件中获取图像并上传图像