js实现文件上传，图片本地预览（部分代码是借鉴的）

<div style="height:30px;vertical-align: top;">
<input type="button" value="添加图片" id="btnAdd"
onclick="selectAttachment();" style="float:left;" />
<input type="button"
value="清空图片" id="btnClear" style="margin-left:8px;float:left;display: none"
onclick="clearAttachment();" /><p  style="font-size: 12px;font-color:#8A9BA8;border:0px;cursor:default;" >第一张默认为封面,每张最大10MB,支持jpg/gif/png格式 </p>
</div>
<div id="attachmentList"
style="width: 600px;margin: 3px 0px 0px 0px; padding: 4px 3px 4px 3px; background-color: #8FBC8F; display: none; border: 1px solid #8A9BA8;">
</div>
<div id="total" style="margin: 3px 0px 0px 0px;display:none">当前选择上传0个附件</div>
<div id="preview" style="height: 100px;display:none">
<!-- 图片预览区域 -->
</div>

/*图片预览之后上传*/
//图片上传预览    IE是用了滤镜。
var i = 0; // 用来动态生成span,upfile的id
function addAttachmentToList(file) {
var theEvent = window.event || arguments.callee.caller.arguments[0];
obj = theEvent.srcElement ? theEvent.srcElement : theEvent.target;
if (findAttachment(obj.value)){
alert("已经在上传队列，请勿重复上传！！");
return; //如果此文档已在附件列表中则不再添加
}

previewImage(file);
// 动态创建附件信息栏并添加到附件列表中
var span = document.createElement('span');
span.id = '_attachment' + i;

span.innerHTML = extractFileName(obj.value)
+ ' <a href="javascript:delAttachment(' + (i++)
+ ')"><font color="blue">删除</font></a><br/>';
span.title = obj.value;
G('attachmentList').appendChild(span);

// 显示附件列表并变换添加附件按钮文本
if (G('attachmentList').style.display == 'none') {
G('btnAdd').value = '继续添加';
G('attachmentList').style.display = 'block';
G('btnClear').style.display = 'block';
}
//	debugger
G('total').innerHTML = '当前选择上传' + G('attachmentList').children.length
+ '个附件';
}

function selectAttachment() {
// 先清除无效动态生成的多余upfile
cleanInvalidUpfile();

// 动态创建上传控件并与span对应
var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList(this);" id="_upfile'
+ i + '">';
document.body.insertAdjacentHTML('beforeEnd', upfile);
G('_upfile' + i).click();
}

function extractFileName(fn) {
return fn.substr(fn.lastIndexOf('\\') + 1);
}

function findAttachment(fn) {
var o = G('attachmentList').getElementsByTagName('span');
for (var i = 0; i < o.length; i++)
if (o[i].title == fn)
return true;
return false;
}

function delAttachment(id) {
debugger
var div = $('#preview');
var child = div.children();
for(var j = 0 ;j<G('attachmentList').children.length;j++){
if(child[j].id.indexOf(id)!=-1){
child[j].remove();
}
}

G('attachmentList').removeChild(G('_attachment' + id));
document.body.removeChild(G('_upfile' + id));

// 当附件列表为空则不显示并且变化添加附件按钮文本
if (G('attachmentList').children.length == 0) {
G('btnAdd').value = '添加附件';
G('attachmentList').style.display="none";
G('btnClear').style.display="none";
div.hide();
}

G('total').innerText = '当前选择上传' + G('attachmentList').children.length
+ '个附件';
}

function cleanInvalidUpfile() {
var o = document.body.getElementsByTagName('input');
for (var i = o.length - 1; i >= 0; i--)
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0) {
if (!G('_attachment' + o[i].id.substr(7)))
document.body.removeChild(o[i]);
}

}

function clearAttachment() {
var o = G('attachmentList').childNodes;
for (var i = o.length - 1; i >= 0; i--)
G('attachmentList').removeChild(o[i]);

o = document.body.getElementsByTagName('input');
for (var i = o.length - 1; i >= 0; i--)
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0) {
document.body.removeChild(o[i]);
}

var div = $('#preview');
div.children().remove();
div.hide();
G('btnAdd').value = '添加附件';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
G('total').innerText = '当前选择上传0个附件';

}

function getAttachmentInfo() {
// 已知的js获取本地文件大小的三种方式
// 1.通过FSO 2.通过ActiveX 3.通过Flash(设置可能更麻烦)与js交互
// 注：QQ邮箱中获取本地文件大小就是采用第二种方式
}

function G(id) {
return document.getElementById(id);
}

function previewImage(file) {
var MAXWIDTH = 80;
var MAXHEIGHT = 80;
var div = $('#preview').show();
if (file.files && file.files[0]) {

div.append("<div id='div"+i+"' style='border:2px solid #8A9BA8;width:80px;height:80px;margin: 15px 10px 10px 0px;float:left;padding-top: 1px;padding-bottom: 1px;'><img id='imghead"+i+"' style='display:none'></img></div>");
var img = document.getElementById('imghead'+i);
img.onload = function() {
img.style.display="block";
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth,
img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
img.style.marginLeft = rect.left+'px';
img.style.marginTop = rect.top + 'px';
}
var reader = new FileReader();
reader.onload = function(evt) {
img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
} else //兼容IE
{
var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.append("<div id='div"+i+"' style='border:2px solid #8A9BA8;width:80px;height:80px;margin: 15px 10px 10px 0px;float:left;padding-top: 1px;padding-bottom: 1px;'><img id='imghead"+i+"' style='display:none'></img></div>");
var img = document.getElementById('imghead'+i);
img.style.display="block";
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth,
img.offsetHeight);
status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
div.innerHTML = "<div id=divhead style='width:" + rect.width + "height:" + rect.height + "px;margin-top:" + rect.top
+ "px;" + sFilter + src + "\"'></div>";
}
}
function clacImgZoomParam(maxWidth, maxHeight, width, height) {
var param = {
top : 0,
left : 0,
width : width,
height : height
};
if (width > maxWidth || height > maxHeight) {
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;

if (rateWidth > rateHeight) {
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
} else {
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}

param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}