使用ajax上传图片到后台

发布于2017-05-02  1,610次阅读


html 如下:

<form class="form-horizontal" role="form" id="edit_population">
新闻标题 :<input type="text" id="form-field-1" name="news_title"  placeholder="请填写新闻标题" class="col-xs-10 col-sm-5" />

滚动图片 :<input type="file" name="news_picture" id="id-input-file-2" class="col-xs-10 col-sm-5" />
<button class="btn btn-info" type="button" id="submit_this_form">
<i class="icon-ok bigger-110"></i> 添加
</button>
</form>

 

js 如下:

<script src="__PUBLIC__/js/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
$('#submit_this_form').click(function() {

var formElement = $('#edit_population')[0];
postdata = new FormData(formElement);

$.ajax({

url: "{:U('Manage/edit_news_data')}",

type: "POST",

dataType: 'json',

data: postdata,

contentType: false,

processData: false,

success: function(data) {

if (data.code == 'success') {

alert('上传成功');

} else {

alert('上传失败');

}

}

});

});

</script>

 

参考文章:

http://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload

http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html


  • 微信或支付宝

道,可道,非常道;名,可名,非常名。