Javascript 多文件附件、显示附件、删除文件按钮选项。

我需要在HTML输入类型文件的文件附件脚本。而在输入文件中附加的文件则必须显示文件名并且显示文件名旁边的删除文件按钮选项。然后添加更多需要多个文件附件的文件按钮选项。

//jQuery插件
（函数（$）{
$.fn.uploader=函数（选项）{
变量设置=$.extend({
MessageAreaText：“未选择任何文件。”，
MessageAreaTextWithFiles:“文件列表：”，
DefaultErrorMessage：“无法打开此文件。”，
BadTypeErrorMessage：“我们目前无法接受此文件类型。”，
接受的文件类型：['pdf'，jpg'，gif'，jpeg'，bmp'，tif'，tiff'，png'，xps'，doc'，docx'，
“传真”、“wmp”、“ico”、“txt”、“cs”、“rtf”、“xls”、“xlsx”]
}，选项）；
var uploadId=1；
//更新消息
$（'.file-uploader_uumessage-area p'）.text（options.MessageAreaText | | settings.MessageAreaText）；
//创建并添加文件列表和隐藏输入列表
var fileList=$（'
）；
变量hiddenInputs=$（''）；
$（'.file-uploader\uu message-area'）。在（文件列表）之后；
$（'.file list'）。在（hiddenInputs）之后；
//选择文件时，将名称添加到列表中，并将文件输入复制到隐藏的输入中
$（'.file-chooser__input'）。在（'change'，function（）上{
var file=$（'.file-chooser__输入'）.val（）；
var fileName=（file.match（/（[^\\\/]+）$/）[0]）；
//清除任何错误条件
$（'.file chooser'）.removeClass（'error'）；
$（'.error message'）.remove（）；
//验证文件
var check=checkFile（文件名）；
如果（检查==“有效”）{
//将“真实”列表移动到隐藏列表
$（'.hidden inputs'）。追加（$（'.file-chooser__input'））；
//在隐藏之后插入克隆（也复制事件处理程序）
$（'.file-chooser'）.append（$（'.file-chooser__输入'）.clone（{withDataAndEvents:true}））；
//将名称和“删除”按钮添加到文件列表中
$（'.file list'）.append（'
'+fileName+”
'）；
$（'.file list'）.find（“li:last”）.show（800）；
//移除按钮处理程序
$（'.removation button'）。在（'click'，函数（e）上{
e、 预防默认值（）；
//删除相应的隐藏输入
$（'.hidden inputs输入[data uploadid=“'+$（this）.data（'uploadid'）+'“]'））.remove（）；
//从与单击的按钮对应的文件列表中删除名称
$（this.parent（）.hide（“puff”）.delay（10.queue（函数（）{$（this.remove（）；}）；
//如果列表现在为空，请将文本改回
如果（$（'.file list li'）。长度===0）{
$（'.file-uploader_uumessage-area'）.text（options.MessageAreaText | | settings.MessageAreaText）；
}
});
//因此，事件处理程序在新的“真实”事件处理程序上工作
$（'.hidden inputs.file-chooser\uuu input'）.removeClass（'file-chooser\uu input'）.attr（'data-uploadId'，uploadId'）；
//更新消息区域
$（'.file-uploader__message-area'）.text（options.MessageAreaTextWithFiles | | settings.MessageAreaTextWithFiles）；
uploadId++；
}否则{
//指示文件不正常
$（'.file chooser'）.addClass（“错误”）；
var errorText=options.DefaultErrorMessage | | settings.DefaultErrorMessage；
如果（检查==“badFileName”）{
errorText=options.BadTypeErrorMessage | | settings.BadTypeErrorMessage；
}
$（'.file-chooser__input'）。在（'
'+errorText+'
'）之后；
}
});
var checkFile=函数（文件名）{
var accepted=“无效”，
acceptedFileTypes=this.acceptedFileTypes | | settings.acceptedFileTypes，
正则表达式；
对于（var i=0；i
。文件上传程序{
背景色：#dbefe9；
边界半径：3px；
颜色：#2424；
}
.file-uploader\uuu消息区{
字号：18px；
填充：1em；
文本对齐：居中；
颜色：#377a65；
}
.文件清单{
背景色：白色；
字体大小：16px；
}
.file-list\u名称{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.文件列表李{
高度：50px；
线高：50px；
左侧边缘：.5em；
边界：无；
溢出：隐藏；
}
.拆卸按钮{
宽度：20%；
边界：无；
背景色：#d65d38；
颜色：白色；
}
.删除按钮：：之前{
内容：“X”；
}
.移除按钮：焦点{
大纲：0；
}
.文件选择器{
填充：1em；
过渡：背景色1s，高度1s；
}
.file选择器p{
字号：18px；
垫面：1米；
}
.文件上传器{
最大宽度：400px；
高度：自动；
利润率：2米自动；
}
.文件上传器*{
显示：块；
}
.file uploader输入[类型=提交]{
边缘顶部：2米；
浮动：对；
}
.文件清单{
保证金：0自动；
最大宽度：90%；
}
.file-list\u名称{
最大宽度：70%；
浮动：左；
}
.拆卸按钮{
显示：内联块；
身高：100%；
浮动：对；
}
.文件选择器{
宽度：90%；
保证金：.5em自动；
}
.file-chooser\u输入{
保证金：0自动；
}
.file-uploader\uu提交按钮{
宽度：100%；
边界：无；
字号：1.5em；
填充：1em；
背景色：#72bfa7；
颜色：白色；
}
.file-uploader\uuu submit-buto