图片预览（blob:http://……）后如何上传给后台？

最近在改图片上传功能，之前是通过FileReader.readAsDataURL(file)实现预览，上传前再把base64图片转为blob的，但是这样有个缺点，预览的时候没办法在img标签中保存原图片名，于是我就想到了如下方法（部分代码省略）：

<div class="layui-container" style="margin-top: 50px;">

			<form action="#" method="post" enctype="multipart/form-data">

				<input type="file" id="files" name="files" accept="image/*" multiple="multiple" style="display: none;"/>

				<button type="button" onclick="$('#files').click();" class="layui-btn">选择图片</button>

				<button type="button" class="layui-btn">提交上传</button>

				<div class="image-container">

					<ul class="image-list" id="fileList">

						

					</ul>

				</div>

			</form>

		</div>

		<script type="text/javascript">

			$(function(){

				$("#files").on("change",function(){

					var file = $('#files').get(0).files

					for(i = 0; i< file.length; i ++) {

						var size = file[i].size;

						if(size > 1024 * 1024) {//限制图片大小只能在1M以内

							layer.msg('图片大小不能超过1M', {icon:5});

							break;

							return false;

						}

						var url = getUrl(file[i]);

						var html = "<li class='image-item'><img data-file="+file[i]+" data-fileName="+file[i].name+" src="+url+"></li>";

						$("#fileList").append(html);

					}

				})

			});

			function getUrl (file) {

				var url = null;

	            if (window.createObjectURL != undefined) {

	                url = window.createObjectURL(file)

	            } else if (window.URL != undefined) {

	                url = window.URL.createObjectURL(file)

	            } else if (window.webkitURL != undefined) {

	                url = window.webkitURL.createObjectURL(file)

	            }

	            return url

			}

		</script>

然后生成的预览图片是这样子的：

<img src="blob:http://127.0.0.1:8020/eab54fa6-c4ee-415e-b022-3e68577f09bc" />

这种blob:http://……要怎么提交到后台啊？有人知道吗？

我的需求是上传前实现图片预览，并且需要把原文件名穿给后台（ajax形式上传图片），有其他更好方法的欢迎指教