如何在Web页上实现文件上传

JAVA WEB文件上传步骤如下：

实现 Web 开发中的文件上传功能，两个 *** 作：在 Web 页面添加上传输入项，在 Servlet 中读取上传文件的数据并保存在本地硬盘中。

1、Web 端上传文件。在 Web 页面中添加上传输入项：<input type="file">设置文件上传输入项时应注意：(1) 必须设置 input 输入项的 name 属性，否则浏览器将不会发送上传文件的数据。(2) 必须把 form 的 enctype 属性设为 multipart/form-data，设置该值后，浏览器在上传文件时，将把文件数据附带在 http 请求消息体中，并使用 MIME 协议对上传文件进行描述，以方便接收方对上传数据进行解析和处理。(3) 表单提交的方式要是 post

3种情况HTTPStatusCode:403ForbiddenErrorCode:RequestTimeToo-SkewedDescription:Thedifferencebetweentherequesttimeandtheserver'stimeistoolarge.

引入资源 使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader/server/fileupload/server/fileupload.php', // 选择文件的按钮。 可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }) 监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。 PS: 这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。 // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img')// $list为容器jQuery实例 $list.append( $li )// 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能预览</span>')return } $img.attr( 'src', src )}, thumbnailWidth, thumbnailHeight )}) 然后剩下的就是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress,uploadSuccess, uploadError, uploadComplete事件。 // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span')// 避免重复创建 if ( !$percent.length ) { $percent = $('<p class="progress"><span></span></p>') .appendTo( $li ) .find('span') } $percent.css( 'width', percentage * 100 + '%' )})// 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).addClass('upload-state-done')})// 文件上传失败，显示上传出错。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error')// 避免重复创建 if ( !$error.length ) { $error = $('<div class="error"></div>').appendTo( $li ) } $error.text('上传失败')}) // 完成上传完了，成功或者失败，先删除进度条。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove()}) 以上所述是小编给大家介绍的使用Web Uploader实现多文件上传的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

---