FileReader图片上传到服务器

图片上传到服务器方法

代码如下:

HTML :

<a href="#">
		<div class="box-two">
				<div class="box-two-text">
					<span style="color: black; font-size: 16px; padding: 30px 20px 30px 20px;">头像</span>
				</div>
				<div style="float: left;width: 60%;z-index: 999;position: fixed;width: 100%;">
					<form action="admin/NewsManager/UpdateImgBy80" method="post">
						<input style="background: transparent;opacity: 0;height: 80px;width: 100%;" type="file" id="fileUpload" name="fileTrans" multiple="true" value="上传图片" />
					</form>
				</div>
				<div class="pic">
					<div id="userImg" style="width: 45px;height: 45px;border-radius: 20px;margin-right: 10px;">
						<img  id="sc-img" src="images/gwclogo.png" style="width: 45px;height: 45px;border-radius: 20px;" />
					</div>
					<!--<img src="img/ziliao-xiangyou.png" style="width: 10px; margin-bottom: 10px;margin-left: 10px;" />-->
				</div>
		</div>
	</a>

js 代码:

$("#fileUpload").on('change', function() {

				if(typeof(FileReader) != "undefined") {

					var image_holder = $("#userImg");
					image_holder.empty();

					var reader = new FileReader();
					reader.onload = function(e) {

						$("<img />", { //创建img 然后追加进去
							"src": e.target.result, //target中的result属性的值,就是该文件的base64数据
							"style": "width:45px;height:45px;border-radius: 45px;",
							"class": "thumb-image",
							"id": "sc-img"
						}).appendTo(image_holder);

						var ar = new Array();
						var ee = e.target.result;
						var data = ee.substr(ee.indexOf('base64,') + 7); // 16+7=23

						ar.InterfaceAddress = "这里接入后台提供的接口代码名";
						ar.Pic = data; //传入照片流。
						ar.username = 999;
						ar.id = localStorage.getItem("UserId");
						ar.fileName = 'userHead';
						ar.tm = '1';
						ar.Handshake_Time = CurentTime('-', true);
						aes(ar, "endHeadpic");
						console.log(ar);
						//以上ar 数组 套用封装好的代码转换成json数组 和 数据,再用 ajax  post到后台返回 rs。
	

					}

					image_holder.show();
					reader.readAsDataURL($(this)[0].files[0]); //将文件读取为本地url 通过readAsDataURL读取数据成功后,就会触发load事件

				} else {
					alert("你的浏览器不支持FileReader.");
				}

			});
			
			function endHeadpic(rs) { //关于ajax 已经封装成JS文件 我们公司可直接这样套用传入后台数据中。
				
				console.log(rs);
				
			}
以上就是传入我们后台服务器的流程代码。