用js脚本,怎么实现弹出选择图片的对话框,并将文件上传到服务器

JavaScript033

用js脚本,怎么实现弹出选择图片的对话框,并将文件上传到服务器,第1张

//要有form标签,设置提交地址。后面就是后台的事了。

<form action="提交地址" method="post" enctype="multipart/form-data">

<input type="button" id="upload" name="" value="选择" />

<input type="submit" id="upload" name="" value="提交" />

</form>

//百度没给我审核通过:“先介绍算法思路,再给出参考代码,并对关键代码做注释说明。提供运行效果截图。”

//这句话是给百度的:“我真实忍不住要骂人,思路,参考代码,注释,还要运行效果截图!!这一串下来要花多少时间??你TM是给我发工资还是怎么!!!??我给别人解决问题浪费我少许时间我可接收我也算助人为乐,现在到好还要像孙子一样按你的指示一步步做事????”

下面先介绍上传文件到服务器(多文件上传):

import javax.servlet.*

import javax.servlet.http.*

import java.io.*

import java.util.*

import java.util.regex.*

import org.apache.commons.fileupload.*

public class upload extends HttpServlet {

private static final String CONTENT_TYPE = "text/htmlcharset=GB2312"

//Process the HTTP Post request

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType(CONTENT_TYPE)

PrintWriter out=response.getWriter()

try {

DiskFileUpload fu = new DiskFileUpload()

// 设置允许用户上传文件大小,单位:字节,这里设为2m

fu.setSizeMax(2*1024*1024)

// 设置最多只允许在内存中存储的数据,单位:字节

fu.setSizeThreshold(4096)

// 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录

fu.setRepositoryPath("c://windows//temp")

//开始读取上传信息

List fileItems = fu.parseRequest(request)

// 依次处理每个上传的文件

Iterator iter = fileItems.iterator()

//正则匹配,过滤路径取文件名

String regExp=".+////(.+)$"

//过滤掉的文件类型

String[] errorType={".exe",".com",".cgi",".asp"}

Pattern p = Pattern.compile(regExp)

while (iter.hasNext()) {

FileItem item = (FileItem)iter.next()

//忽略其他不是文件域的所有表单信息

if (!item.isFormField()) {

String name = item.getName()

long size = item.getSize()

if((name==null||name.equals("")) &&size==0)

continue

Matcher m = p.matcher(name)

boolean result = m.find()

if (result){

for (int temp=0temp<ERRORTYPE.LENGTHTEMP++){

if (m.group(1).endsWith(errorType[temp])){

throw new IOException(name+": wrong type")

}

}

try{

//保存上传的文件到指定的目录

//在下文中上传文件至数据库时,将对这里改写

item.write(new File("d://" + m.group(1)))

out.print(name+" "+size+"")

}

catch(Exception e){

out.println(e)

}

}

else

{

throw new IOException("fail to upload")

}

}

}

}

catch (IOException e){

out.println(e)

}

catch (FileUploadException e){

out.println(e)

}

}

}

现在介绍上传文件到服务器,下面只写出相关代码:

以sql2000为例,表结构如下:

字段名:namefilecode

类型: varchar image

数据库插入代码为:PreparedStatement pstmt=conn.prepareStatement("insert into test values(?,?)")

代码如下:

。。。。。。

try{

这段代码如果不去掉,将一同写入到服务器中

//item.write(new File("d://" + m.group(1)))

int byteread=0

//读取输入流,也就是上传的文件内容

InputStream inStream=item.getInputStream()

pstmt.setString(1,m.group(1))

pstmt.setBinaryStream(2,inStream,(int)size)

pstmt.executeUpdate()

inStream.close()

out.println(name+" "+size+" ")

}

。。。。。。

这样就实现了上传文件至数据库

File Upload组件啊,是同步还是异步呢

html部分:

<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">

文件引入:

<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>

HTML部分:

<div id="demo"> <div id="as" ></div></div>

JS部分:

<script type="text/javascript">

/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯* 其他参数同WebUploader*/

$('#as').diyUpload({

url:'server/fileupload.php',

success:function( data ) {

console.info( data ) },

error:function( err ) {

console.info( err )

},

buttonText : '选择文件',chunked:true,// 分片大小

chunkSize:512 * 1024,//最大上传的文件数量, 总文件大小,单个文件大小(单位字节)

fileNumLimit:50,

fileSizeLimit:500000 * 1024,

fileSingleSizeLimit:50000 * 1024,

accept: {}})

</script>