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+" ")
}
。。。。。。
这样就实现了上传文件至数据库
前端formdata或者Ajax上传文件Node端：用multiparty接收文件，再用fs.rename将文件存储到你需要的位置。
var MULTIPARTY = require('multiparty')
var FS = require('fs')
var saveTowerFile = function (req, res, next) {
var form = new MULTIPARTY.Form({uploadDir: "../appData/excel/"})
form.parse(req, function (err, fields, files) {
if (err) {
console.log("上传失败！" + err)
var errcode = {result: "失败"}
res.send(errcode)
return
} else {
var inputFile = files.file[0]
var uploadedPath = inputFile.path
var dstPath = '../appData/excel/' + UUID.v1()
FS.rename(uploadedPath, dstPath, function(err) {
if (err) {
var errcode = {result: "失败"}
res.send(errcode)
return
} else {
debug('rename ok')
res.send(“OK”)
}
})
}
})
}
前端JS中使用XMLHttpRequest 2上传图片到服务器，PC端和大部分手机上都正常，但在少部分安卓手机上上传失败，服务器上查看图片，显示字节数为0。下面是上传图片的核心代码： HTML <input type="file" id="choose" capture="camera" accept="image/*"> JavaScript var filechooser = document.getElementById("choose") filechooser.onchange = function () { var _this = $(this) if (!this.files.length) return var files = Array.prototype.slice.call(this.files) if (files.length >1) { alert("一次只能上传1张图片") return } files.forEach(function (file, i) { if (!/\/(?:jpegpnggif)/i.test(file.type)) return var reader = new FileReader() reader.onload = function () { var result = this.result upload(result, file.type) } reader.readAsDataURL(file) }) } function upload(basestr, type){ var xhr = new XMLHttpRequest() var text = window.atob(basestr.split(",")[1]) var buffer = new Uint8Array(text.length) var pecent = 0 for (var i = 0i <text.lengthi++) { buffer[i] = text.charCodeAt(i) } var blob = getBlob(buffer, type) var formdata = new FormData() formdata.append('imagefile', blob) xhr.open('post', '/uploadtest') xhr.onreadystatechange = function () { if (xhr.readyState == 4 &&xhr.status == 200) { var jsonData = JSON.parse(xhr.responseText) console.log(jsonData) } } //利用progress事件显示数据发送进度 xhr.upload.addEventListener('progress', function (e) { pecent = ~~(100 * e.loaded / e.total) / 2 // 利用pecent来显示上传进度 }, false) xhr.send(formdata) } function getBlob(buffer, format){ var Builder = window.WebKitBlobBuilder window.MozBlobBuilder if(Builder){ var builder = new Builder() builder.append(buffer) return builder.getBlob(format) } else { return new window.Blob([ buffer ], {type: format}) } } 上述代码使用FormData来实现表单数据提交。FormData是一种针对XHR2设计的新型数据类型，使用它我们可以很方便地实时以JavaScript创建HTML <Form>，然后通过AJAX提交该表单。在上述代码中，提交的表单中的字段名为imagefile，值是blob，这是一个通过getBlob函数构造并返回的文件Blob。通过该方法上传文件简单直观。 然后我们在服务端接收并保存图片，并返回已上传的图片的信息。 下面是Node.js代码的示例： var Q = require('q') var fs = require('fs') var path = require('path') var formidable = require('formidable') var moment = require('moment')var imageUpload = function (){ } imageUpload.prototype.useFormParseCallback = function(req){ var deferred = Q.defer() var form = new formidable.IncomingForm() form.parse(req, deferred.makeNodeResolver()) return deferred.promise } imageUpload.prototype.uploadImageTest = function(req){ var pathName = 'uploadImgs/dealInfo/' var uploadPath = path.join(__dirname, '../../public/', pathName) return this.useFormParseCallback(req).then(function(files){ var file = files[1].imagefile var fileType = files[1].imagefile.type.split('/')[1] var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType var readStream = fs.createReadStream(file.path) var writeStream = fs.createWriteStream(uploadPath + newFileName) var deferred = Q.defer() readStream.pipe(writeStream) readStream.on('end', deferred.makeNodeResolver()) return deferred.promise.then(function() { fs.unlinkSync(file.path) return { fileName: newFileName, filePath: '/' + pathName + newFileName, fileSize: file.size/1024 >1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB" } }) }) } module.exports = imageUpload 我们使用formidable这个包来接收上传文件的数据，然后将文件保存到/public/uploadImgs/dealInfo目录下（假定已在express中将public设置为static的根目录），并将图片按照指定的规则重命名，以保证上传图片不会因为名称相同而被覆盖。另外，代码中使用Q来避免直接使用回调函数，以更好地对函数功能进行分离。 上面的代码在PC端浏览器以及大部分主流移动设备上都能正常工作，但是少部分Android设备上却会出现上传的图片字节数为0的情况。具体的原因大家可以看下面几个网页中的描述： 就是说这个是Android的一个bug！ 那如何解决呢？ 其实从上面给出的页面中可以找到答案，就是我们得换一种文件上传方式。在XHR2中，除了以Blob的方式上传文件外，还可以ArrayBuffer的方式上传文件。 下面是修改之后的前端JavaScript代码： var filechooser = document.getElementById("choose") filechooser.onchange = function () { var _this = $(this) if (!this.files.length) return var files = Array.prototype.slice.call(this.files) if (files.length >1) { alert("一次只能上传1张图片") return } files.forEach(function (file, i) { if (!/\/(?:jpegpnggif)/i.test(file.type)) return var reader = new FileReader() reader.onload = function () { var result = this.result upload(result, file.type) } reader.readAsDataURL(file) }) } function upload(basestr, type){ var xhr = new XMLHttpRequest() var text = window.atob(basestr.split(",")[1]) var buffer = new Uint8Array(text.length) var pecent = 0 for (var i = 0i <text.lengthi++) { buffer[i] = text.charCodeAt(i) } xhr.open('post', '/uploadtest?filetype=' + type.split('/')[1]) xhr.setRequestHeader('Content-Type', 'application/octet-stream') xhr.onreadystatechange = function () { if (xhr.readyState == 4 &&xhr.status == 200) { var jsonData = JSON.parse(xhr.responseText) console.log(jsonData) } } //利用progress事件显示数据发送进度 xhr.upload.addEventListener('progress', function (e) { pecent = ~~(100 * e.loaded / e.total) / 2 // 利用pecent来显示上传进度 }, false) xhr.send(buffer.buffer)// 以ArrayBuffer的方式上传图片 }我将有变化的地方加了高亮显示。以ArrayBuffer方式上传图片必须添加'application/octet-stream'的RequestHeader，否则服务器无法响应请求。另外，通过这种方式上传图片我们也无法从表单数据中获取到文件类型，可以将文件类型以query的方式传到服务器，然后服务器根据文件类型来生成对应的文件，以下是经过少量修改之后的服务器代码： imageUpload.prototype.uploadImageTest = function(req){ var pathName = 'uploadImgs/dealInfo/' var uploadPath = path.join(__dirname, '../../public/', pathName) return this.useFormParseCallback(req).then(function(files){ var file = files[1].file var fileType = req.query.filetype ? ('.' + req.query.filetype) : '.png' var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType var readStream = fs.createReadStream(file.path) var writeStream = fs.createWriteStream(uploadPath + newFileName) var deferred = Q.defer() readStream.pipe(writeStream) readStream.on('end', deferred.makeNodeResolver()) return deferred.promise.then(function() { fs.unlinkSync(file.path) return { fileName: newFileName, filePath: '/' + pathName + newFileName, fileSize: file.size/1024 >1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB" } }) }) } 修改之后的代码可以支持Android手机，包括微信浏览器。注意不是所有的Android手机都会存在该问题，如果你发现在Andriod手机上无法上传图片，尤其是在微信浏览器中，则可以尝试下上面的方法。 以上所述是小编给大家介绍的关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法，希望对大家有所帮助！
