ajax如何 实现 文件上传

程序说明

使用说明

实例化时，第一个必要参数是file控件对象：

new QuickUpload(file)

第二个可选参数用来设置系统的默认属性，包括

属性:    默认值//说明

parameter: {},//参数对象

action:  "",//设置action

timeout: 0,//设置超时(秒为单位)

onReady: function(){},//上传准备时执行

onFinish: function(){},//上传完成时执行

onStop:  function(){},//上传停止时执行

onTimeout: function(){}//上传超时时执行

还提供了以下方法：

upload：执行上传操作；

stop：停止上传操作；

dispose：销毁程序。

var QuickUpload = function(file, options) {

this.file = $$(file)

this._sending = false//是否正在上传

this._timer = null//定时器

this._iframe = null//iframe对象

this._form = null//form对象

this._inputs = {}//input对象

this._fFINISH = null//完成执行函数

$$.extend(this, this._setOptions(options))

}

QuickUpload._counter = 1

QuickUpload.prototype = {

//设置默认属性

_setOptions: function(options) {

this.options = {//默认值

action:        "",//设置action

timeout:    0,//设置超时(秒为单位)

parameter:    {},//参数对象

onReady:    function(){},//上传准备时执行

onFinish:    function(){},//上传完成时执行

onStop:        function(){},//上传停止时执行

onTimeout:    function(){}//上传超时时执行

}

return $$.extend(this.options, options || {})

},

//上传文件

upload: function() {

//停止上一次上传

this.stop()

//没有文件返回

if ( !this.file || !this.file.value ) return

//可能在onReady中修改相关属性所以放前面

this.onReady()

//设置iframe,form和表单控件

this._setIframe()

this._setForm()

this._setInput()

//设置超时

if ( this.timeout > 0 ) {

this._timer = setTimeout( $$F.bind(this._timeout, this), this.timeout * 1000 )

}

//开始上传

this._form.submit()

this._sending = true

},

//设置iframe

_setIframe: function() {

if ( !this._iframe ) {

//创建iframe

var iframename = "QUICKUPLOAD_" + QuickUpload._counter++,

iframe = document.createElement( $$B.ie ? "<iframe name=\"" + iframename + "\">" : "iframe")

iframe.name = iframename

iframe.style.display = "none"

//记录完成程序方便移除

var finish = this._fFINISH = $$F.bind(this._finish, this)

//iframe加载完后执行完成程序

if ( $$B.ie ) {

iframe.attachEvent( "onload", finish )

} else {

iframe.onload = $$B.opera ? function(){ this.onload = finish } : finish

}

//插入body

var body = document.body body.insertBefore( iframe, body.childNodes[0] )

this._iframe = iframe

}

},

//设置form

_setForm: function() {

if ( !this._form ) {

var form = document.createElement('form'), file = this.file

//设置属性

$$.extend(form, {

target: this._iframe.name, method: "post", encoding: "multipart/form-data"

})

//设置样式

$$D.setStyle(form, {

padding: 0, margin: 0, border: 0,

backgroundColor: "transparent", display: "inline"

})

//提交前去掉form

file.form && $$E.addEvent(file.form, "submit", $$F.bind(this.dispose, this))

//插入form

file.parentNode.insertBefore(form, file).appendChild(file)

this._form = form

}

//action可能会修改

this._form.action = this.action

},

//设置input

_setInput: function() {

var form = this._form, oldInputs = this._inputs, newInputs = {}, name

//设置input

for ( name in this.parameter ) {

var input = form[name]

if ( !input ) {

//如果没有对应input新建一个

input = document.createElement("input")

input.name = name input.type = "hidden"

form.appendChild(input)

}

input.value = this.parameter[name]

//记录当前input

newInputs[name] = input

//删除已有记录

delete oldInputs[name]

}

//移除无用input

for ( name in oldInputs ) { form.removeChild( oldInputs[name] ) }

//保存当前input

this._inputs = newInputs

},

//停止上传

stop: function() {

if ( this._sending ) {

this._sending = false

clearTimeout(this._timer)

//重置iframe

if ( $$B.opera ) {//opera通过设置src会有问题

this._removeIframe()

} else {

this._iframe.src = ""

}

this.onStop()

}

},

//销毁程序

dispose: function() {

this._sending = false

clearTimeout(this._timer)

//清除iframe

if ( $$B.firefox ) {

setTimeout($$F.bind(this._removeIframe, this), 0)

} else {

this._removeIframe()

}

//清除form

this._removeForm()

//清除dom关联

this._inputs = this._fFINISH = this.file = null

},

//清除iframe

_removeIframe: function() {

if ( this._iframe ) {

var iframe = this._iframe

$$B.ie ? iframe.detachEvent( "onload", this._fFINISH ) : ( iframe.onload = null )

document.body.removeChild(iframe) this._iframe = null

}

},

//清除form

_removeForm: function() {

if ( this._form ) {

var form = this._form, parent = form.parentNode

if ( parent ) {

parent.insertBefore(this.file, form) parent.removeChild(form)

}

this._form = this._inputs = null

}

},

//超时函数

_timeout: function() {

if ( this._sending ) { this._sending = false this.stop() this.onTimeout() }

},

//完成函数

_finish: function() {

if ( this._sending ) { this._sending = false this.onFinish(this._iframe) }

}

}

引入ajaxfileupload.js

jQuery.extend({

    createUploadIframe: function(id, uri)

    {

        //create frame

        var frameId = 'jUploadFrame' + id

        if(window.ActiveXObject) {

            var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />')

            if(typeof uri== 'boolean'){

                io.src = 'javascript:false'

            }

            else if(typeof uri== 'string'){

                io.src = uri

            }

        }

        else {

            var io = document.createElement('iframe')

            io.id = frameId

            io.name = frameId

        }

        io.style.position = 'absolute'

        io.style.top = '-1000px'

        io.style.left = '-1000px'

        document.body.appendChild(io)

        return io

    },

    createUploadForm: function(id, fileElementId)

    {

        //create form

        var formId = 'jUploadForm' + id

        var fileId = 'jUploadFile' + id

        var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>')

        var oldElement = $('#' + fileElementId)

        var newElement = $(oldElement).clone()

        $(oldElement).attr('id', fileId)

        $(oldElement).before(newElement)

        $(oldElement).appendTo(form)

        //set attributes

        $(form).css('position', 'absolute')

        $(form).css('top', '-1200px')

        $(form).css('left', '-1200px')

        $(form).appendTo('body')

        return form

    },

    addOtherRequestsToForm: function(form,data)

    {

        // add extra parameter

        var originalElement = $('<input type="hidden" name="" value="">')

        for (var key in data) {

            name = key

            value = data[key]

            var cloneElement = originalElement.clone()

            cloneElement.attr({'name':name,'value':value})

            $(cloneElement).appendTo(form)

        }

        return form

    },

    ajaxFileUpload: function(s) {

        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout

        s = jQuery.extend({}, jQuery.ajaxSettings, s)

        var id = new Date().getTime()

        var form = jQuery.createUploadForm(id, s.fileElementId)

        if ( s.data ) form = jQuery.addOtherRequestsToForm(form,s.data)

        var io = jQuery.createUploadIframe(id, s.secureuri)

        var frameId = 'jUploadFrame' + id

        var formId = 'jUploadForm' + id

        // Watch for a new set of requests

        if ( s.global && ! jQuery.active++ )

        {

            jQuery.event.trigger( "ajaxStart" )

        }

        var requestDone = false

        // Create the request object

        var xml = {}

        if ( s.global )

            jQuery.event.trigger("ajaxSend", [xml, s])

        // Wait for a response to come back

        var uploadCallback = function(isTimeout)

        {

            var io = document.getElementById(frameId)

            try

            {

                if(io.contentWindow)

                {

                    xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null

                    xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document

                }else if(io.contentDocument)

                {

                    xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null

                    xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document

                }

            }catch(e)

            {

                jQuery.handleError(s, xml, null, e)

            }

            if ( xml || isTimeout == "timeout")

            {

                requestDone = true

                var status

                try {

                    status = isTimeout != "timeout" ? "success" : "error"

                    // Make sure that the request was successful or notmodified

                    if ( status != "error" )

                    {

                        // process the data (runs the xml through httpData regardless of callback)

                        var data = jQuery.uploadHttpData( xml, s.dataType )

                        // If a local callback was specified, fire it and pass it the data

                        if ( s.success )

                            s.success( data, status )

                        // Fire the global callback

                        if( s.global )

                            jQuery.event.trigger( "ajaxSuccess", [xml, s] )

                    } else

                        jQuery.handleError(s, xml, status)

                } catch(e)

                {

                    status = "error"

                    jQuery.handleError(s, xml, status, e)

                }

                // The request was completed

                if( s.global )

                    jQuery.event.trigger( "ajaxComplete", [xml, s] )

                // Handle the global AJAX counter

                if ( s.global && ! --jQuery.active )

                    jQuery.event.trigger( "ajaxStop" )

                // Process result

                if ( s.complete )

                    s.complete(xml, status)

                jQuery(io).unbind()

                setTimeout(function()

                { try

                    {

                        $(io).remove()

                        $(form).remove()

                    } catch(e)

                    {

                        jQuery.handleError(s, xml, null, e)

                    }

                }, 100)

                xml = null

            }

        }

        // Timeout checker

        if ( s.timeout > 0 )

        {

            setTimeout(function(){

                // Check to see if the request is still happening

                if( !requestDone ) uploadCallback( "timeout" )

            }, s.timeout)

        }

        try

        {

            // var io = $('#' + frameId)

            var form = $('#' + formId)

            $(form).attr('action', s.url)

            $(form).attr('method', 'POST')

            $(form).attr('target', frameId)

            if(form.encoding)

            {

                form.encoding = 'multipart/form-data'

            }

            else

            {

                form.enctype = 'multipart/form-data'

            }

            $(form).submit()

        } catch(e)

        {

            jQuery.handleError(s, xml, null, e)

        }

        if(window.attachEvent){

            document.getElementById(frameId).attachEvent('onload', uploadCallback)

        }

        else{

            document.getElementById(frameId).addEventListener('load', uploadCallback, false)

        }

        return {abort: function () {}}

    },

    uploadHttpData: function( r, type ) {

        var data = !type

        data = type == "xml" || data ? r.responseXML : r.responseText

        // If the type is "script", eval it in global context

        if ( type == "script" )

            jQuery.globalEval( data )

        // Get the JavaScript object, if JSON is used.

        if ( type == "json" )

        {

            // If you add mimetype in your response,

            // you have to delete the '<pre></pre>' tag.

            // The pre tag in Chrome has attribute, so have to use regex to remove

            var data = r.responseText

            var rx = new RegExp("<pre.*?>(.*?)</pre>","i")

            var am = rx.exec(data)

            //this is the desired data extracted

            var data = (am) ? am[1] : ""    //the only submatch or empty

            eval( "data = " + data )

        }

        // evaluate scripts within html

        if ( type == "html" )

            jQuery("<div>").html(data).evalScripts()

        //alert($('param', data).each(function(){alert($(this).attr('value'))}))

        return data

    }

})

2.引入上传文件所需的jar

3.配置servlet.xml(不是web.xml)

4.jsp上传框

5.ajax传文件到后台

6.后台接收文件

7.获取之后怎么处理自己看着办咯，我只能帮到这里了

HTTP File Server

http-file-server 是用 python 实现的 HTTP 文件服务器，支持上传和下载文件。

运行

$ python file-server.py files 8001

其中第一个参数 files 是存放文件的路径，第二个参数 8001 是 HTTP 服务器端口。

接口

1. 读取文件

GET /pathtofile/filename

2. 读取文件夹下所有文件（已经忽略隐藏文件）

GET /path

返回文件列表为 JSON 数组，文件名末尾带有 / 的表示是文件夹。 filename 为文件名，mtime 为修改时间。

[{"filename":"f1.txt","mtime":1001},{"filename":"p3/","mtime":1002}]

3. 上传文件

采用 POST 方式上传文件，URL 参数中传参数 name 表示上传的文件名，POST 内容为文件内容。

POST /upload?name=filename

ajax 示例:

// file is a FileReader object

var data = file.readAsArrayBuffer()

var xhr = new XMLHttpRequest()

var url = "http://localhost:8001/upload?name=xxx.md"

xhr.open("post", url, true)

xhr.setRequestHeader("Accept", "application/json, text/javascript, */*q=0.01")

xhr.onreadystatechange = function() {

if (xhr.readyState==4 &&xhr.status==200)

{

console.log(xhr.responseText)

}

}

xhr.send(data)

文件名 filename 可以包含相对路径。比如：upload?name=md/xxx.md。则上传至 md 目录下。

---