JS获取文件上传的图片并进行重命名上传

js本身无法直接将原图片进行重命名，但可以通过建立新文件的方式简介重命名文件，修改和重塑的区别在于本质上文件存在是否单一。

css:

div {

				padding: 5px;
				margin: 0 auto;
				text-align: center;
			}

			#mybtn,
			#clearall {
				width: 100px;
				height: 30px;
				font-size: 18px;
				background-color: #00a0e9;
				border: none;
				text-align: center;
				color: #FFF;
			}

			#prevw {
				width: 200px;
				height: 200px;
			}

			#imgshow {
				width: 400px;
				height: 300px;
				background-image: url(imgupload.jpg);
				background-size: 100% 100%;
			}

			#myfile {
				opacity: 0;
				width: 400px;
				height: 300px;
			}

html:

<div id="imgshow">
			<input type="file" onchange="show(this)" name="myfile" id="myfile" value="" />
		</div>
		<div>
			<button id="clearall">重置</button>
			<button id="mybtn">上传</button>
		</div>

js:

//获取文件对象
			var myfile = document.getElementById('myfile').files[0];
			//选中后立即显示图片
			function show(file) {
				// FileReader对象用于读取文件
				var reader = new FileReader(); 				
				//读取File对象的数据
				reader.onload = function(e) {
					$('#imgshow').css("background-image", "url(" + e.target.result + ")");
				}
				reader.readAsDataURL(file.files[0]);
			}


			$("#mybtn").click(function() {
				//获取文件上传文件的文件名和扩展名
				if (myfile.files[0] == undefined) {
					alert('未上传任何文件！');
				} else {
					//创建新文件对象
					var newfile = new File([myfile], new Date().getTime() + ".jpg", {
						type: "image/jpeg"
					});
					//获取上传文件的文件名
					div.innerHTML = div.innerHTML + '<span style="color:#FF0000;">文件名：' + newfile.name + '</span><br>';

					//异步上传时用到的formDate储存
					var formData = new FormData();
					//将fileList[0]添加进去
					formData.append('file', newfile);
					//异步
					$.ajax({
						url: '',
						type: 'POST',
						data: formData,
						contentType: false,
						processData: false,
						async: true,
						success: function(data) {
							console.log("success");
						}
					})

				}
			})


			//点击后重置所有效果
			$("#clearall").click(function() {
				$("#myfile").val("");
				$('#imgshow').css("background-image", "url(imgupload.jpg)");
			});

浏览器访问：