form表单提交上传图片

上传图片我首先想到的是利用这个插件，webupload LUploade这类插件大多支持图片预览，断点/分片上传，功能比较丰富，但是由于后台原因我需要利用form表单进行上传图片，所以就整理了一下关于图片上传的几种方式：

1.form表单上传图片

表单上传遇到了一下几个问题：

（1）进行表单提交时，无法获取返回值

（2）表单提交会进行页面刷新

为了解决这个问题，我想到了利用iframe进行解决，在form元素上直接添加target属性，使提交跳转页面直接跳转到iframe中，阻止页面进行跳转，返回结果也会呈现在 iframe框架之中，我们可以去除iframe中的返回值，前提是必须在同一个域名下。这样我们获取返回值就会拥有局限性。还好我反降了另外一种方法，jquery中jqueryj.form.js表单提交插件。我们可以直接这样来获取表单返回值。

form表单提交注意事项：

(1).提供form表单，method必须是post。

(2).form表单的enctype必须是multipart/form-data。

javascript学习交流群：4538335s's's's'sssssssssssssss54

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：

application/x-www-form-urlencoded：在发送前编码所有字符(默认)(空格被编码为’+’，特殊字符被编码为ASCII十六进制字符)。

multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

text/plain：空格转换为 “+” 加号，但不对特殊字符编码。

默认enctype=application/x-www-form-urlencoded，所以表单的内容会按URL规则编码，然后根据表单的提交方法：

method=’get’ 编码后的表单内容附加在请求连接后，

method=’post’ 编码后的表单内容作为post请求的正文内容。

(3).提供input type="file"上传输入域。

2.ajax无刷新上传 

ajax和FormData可实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的

FormData接口。通过FormData对象可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。

ajax无刷新上传

Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。

3.各类插件的使用：

webupload LUPloader

传其他参数

ajax文件上传怎么传其他参数,Ajax进行文件与其他参数的上传功能

光启元

转载

关注

0点赞·945人阅读

记得前一段时间，为了研究Ajax文件上传，找了很多资料，在网上看到的大部分是form表单的方式提交文件，对于Ajax方式提交文件并且也要提交表单中其他数据，发现提及的并不是很多，后来在同事的帮助下，使用ajaxfileupload最终完成了文件上传与其他提交的 *** 作，现在分享给大家，希望大家能有有所帮助。本文主要介绍了使用Ajax进行文件与其他参数的上传功能(java开发),非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。

文件上传：

*** 作步骤：

1 导入jar包：

我们在使用文件上传时，需要使用到两个jar包，分别是commons-io与commons-fileupload，在这里我使用的两个版本分别是2.4与1.3.1版本的，需要使用JS文件与jar包最后会发给大家一个连接(如何失效请直接我给留言，我会及时更改，谢谢)。

2 修改配置文件：

当我们导入的jar包是不够的，我们需要使用到这些jar包，由于我当时使用的是SSM框架，所以我是在application-content.xml中配置一下CommonsMultipartResolver，具体配置方法如下：

104857600

4096

3 JSP文件：

大家对form表单提交问价的方式很熟悉，但是我们有很多情况下并不能直接使用form表单方式直接提交。这时候我们就需要使用Ajax方式提交，Ajax有很多的好处，比如当我们不需要刷新页面获希望进行局部刷新的时候，我们就可以使用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) }

}

}

---