var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = docement.getElementById('test-image-preview')
//监听change事件
fileInput.addEventListener('change', function() {
//清除背景图片
preview.style.backgroundImage = ''
//检查文件是否选择
if(!fileInput.value) {
info.innerHTML = '没有选择文件'
return
}
//获取file文件引用：
var file = fileInput.files[0]
//获取文件信息
info.innerHTML = '文件：' + file.name + '<br>' +
'大小：' + file.size + '<br>' +
'修改：' + file.lastModifiedDate
if(file.type !== 'image/jpeg' &&file.type !== 'image/png' &&file.type !== 'image/gif') {
alert('不是有效的图片文件')
return
}
//读取文件
var reader = new FileReader()
reader.onload = function(e) {
var data = e.target.result
preview.style.backgroundImage = 'url('+ data + ')'
}
//以DataURL的形式读取文件：
reader.readerAsDataURL(file)
})
js不能用于操作文件，但是可以通过JS调用PHP等程序对文件流进行操作，我这里只涉及前端调用（JQ AJAX,注意要引用JQ类库，并且AJAX必须在服务端才能运行，也就是你必须搭建服务器），至于你文档操作的程序这个得自行搞定了。<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>无标题文档</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="btn">用力点</div>
<script>
$('#btn').click(function(){
$.ajax({
type: "POST",
url: "dom.php", //提价处理的PHP,你也可以是其他处理程序
data: "keyword=HelloWorld", //提交的数据
success: function(msg){
alert( "Data Saved: " + msg )//返回信息 msg 是dom.php renturn 的返回值
}
})
})
</script>
</body>
</html>
