HTML文件上传

html-css05

HTML文件上传,第1张

使用 input ，指定类型为 file ，来完成文件上传功能。

多文件上传需要在标签上添加 mulyiple 属性：

使用 accept 属性来限制上传文件的类型，当然这么做任然是不可靠的，还需要后端做进一步的判断。

如果我们是用户，当我们上传了一张图片，却只显示了几个文字，是不是很不爽，那我们怎么来实现预览功能呢？

我们可以使用 FileReader 将图像转换为二进制字符串，然后添加 load 事件监听，在文件上传成功后获取二进制字符串。

显示文件上册进度 来提高用户体验

FileReader 还有一个 progress 事件，表示当前上传进度，配合HTML5的 progress 标签，我们来模拟一下文件的上传进度。

<HTML>

    <HEAD>

        <TITLE>上传文件</TITLE>

        <SCRIPT language=javascript type=text/javascript>

        <!--

            var RES_BT_DELETE = "删除"

            var isIE = (navigator.userAgent.indexOf("MSIE") != -1)

            var fileIndex = 0

            

            function addFile() 

            {

                var spanId = "filespan"

                var fileId = "uploadfile" + (fileIndex++)

                addInputFile(spanId, fileId)

            }

            

            function addInputFile(spanId, fileId) 

            {

                var span = document.getElementById(spanId)

                if (span != null) 

                {

                    var divObj = document.createElement("div"), fileObj, delObj

                    divObj.id = fileId

                    

                    if (isIE) 

                    {

                        fileObj = document.createElement("<input type=file onchange=changeFile(form)>")

                        delObj = document.createElement("<input type=button onclick=delInputFile('" + spanId + "','" + fileId + "')>")

                    } 

                    else 

                    {

                        fileObj = document.createElement("input")

                        fileObj.type = "file"

                        fileObj.setAttribute("onchange", "changeFile(form)", 0)

                        delObj = document.createElement("input")

                        delObj.type = "button"

                        delObj.setAttribute("onclick", "delInputFile('" + spanId + "','" + fileId + "')", 0)

                    }

            

                    fileObj.name = fileId

                    fileObj.size = "40"

                    fileObj.className = "input"

                    delObj.value = RES_BT_DELETE

                    divObj.appendChild(fileObj)

                    divObj.appendChild(document.createTextNode(" "))

                    divObj.appendChild(delObj)

                    span.appendChild(divObj)

                }

            }

            

            function delInputFile(spanId, fileId) 

            {

                var span = document.getElementById(spanId)

                var divObj = document.getElementById(fileId)

                if (span != null && divObj != null) 

                {

                    span.removeChild(divObj)

                }

            }

        //-->

        </SCRIPT>

        <META content="MSHTML 6.00.2800.1528" name=GENERATOR>

    </HEAD>

    

    <BODY class=pagebackground>

        <FORM id=form action=XXX method=post encType=multipart/form-data>

            <TABLE class=dialog1 height=20 cellSpacing=1 cellPadding=8 width="90%" align=center>

                <TBODY>

                <TR>

                    <TD noWrap>通过文件上传: </TD>

                    <TD id=filespan noWrap>

                        <INPUT class=input type=file size=40 name=file>

                        <INPUT id=btnAdd onclick=addFile() type=button value=添加>

                    </TD>

                </TR>

                </TBODY>

            </TABLE>

        </FORM>

    </BODY>

</HTML>

需要服务器的 ip 地址,ftp帐号,ftp密码, 和工具cute ftp

再找 cute ftp的说明书看看,怎么使用, 学会之后,把本地的html文件,直接拉到服务器那边就等待完成就可以了。