.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

  首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的。这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存,并返回保存的图片路径展示出图片,实现一个无刷新的异步图片上传的过程,当然这里我讲解的是单张图片的保存过程,对于多图片上传的话其实我们只需要在type='file'文本框中加上一个multiple可多选,然后获取input中的文件数组遍历向后台提交感兴趣的话可以尝试,不过下一篇博客将会讲解如何使用Layui上传多张图片到服务端保存。

FormData对象概述:

  FormData对象是H5中的一个新特性,用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

关于FormData对象的使用参考文章:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

Jquery Ajax通过FormData对象异步提交图片文件: HTML中选中图片的按钮:

<div>头像</div> <div class="tuxiang-up" id="headPortrait" style="background-image:url(/Content/ExSys/images/ktoux.jpg))"> <input type="file" onchange="uploadImage(this)"> <!--点击上传按钮后,图片缩略图以上级背景图片显示--> </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wssxff.html