js中动态添加的Input file 控件,我怎么获取到它上传的图片呢?请教各位大神!

JavaScript010

js中动态添加的Input file 控件,我怎么获取到它上传的图片呢?请教各位大神!,第1张

方法一:你可以把你上传的图片,放到数据库中的某个表中,然后,你查询表获得;

方法二:你上传图片成功以后,返回jsp 一个上传图片放置的路径,你把这个路径setValue到

<input id="tee" type="hidden"/>

通过$("#tee").val()获得路径,通过ajax,在后台通过url获得图片;

下面给你介绍3种web前端上传图片的方法:

1.表单上传

最传统的图片上传方式是form表单上传,使用form表单的input[type=”file”]控件,打开系统的文件选择对话框,从而达到选择文件并上传的目的。

form表单上传

表单上传需要注意以下几点:

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

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

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

2.ajax上传

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

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

ajax无刷新上传

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

3.各类插件上传

当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等,这时传统的表单上传很难实现这些功能,我们可以借助现有插件完成。

如百度上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等,大家可根据项目实际需求选择适合的插件。

input file 有一个change事件,楼主可以控制change事件来达成想要的效果。

实例:

html代码:

<div id='div1'><input type='file'/><div>

js代码:

$(":file").change(function(){

onInputChange()

})

function onInputChange()

{

$("#div1").append("<input type='file' onchange='onInputChange()'")

}

代码的意思是,选择一个文件后触发change事件,在div末尾添加一个新的input file元素,并指定这个元素的change事件。

这里只是我个人的一些简单的见解,如果楼主想要专业的多文件上传控件,可以多查一查,现在网上有这样的东西,也比较专业。