jquery ajaxfileupload插件实现文件上传

来源：互联网发布：2017个人博客源码下载编辑：程序博客网时间：2024/05/21 13:48

1.首先需要下载jquery.js 和ajaxfileupload.js文件下载地址：http://yun.baidu.com/share/link?shareid=2265250234&uk=1530236005（注意：我之前因为下错了js文件，搞了一上午ajaxfileupload都不执行到后台，一直没反应）

2.html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js2/jquery.js"></script>
<script type="text/javascript" src="js2/ajaxfileupload.js?1"></script>
<style>
.file {
position: relative;

background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
font-size:13px;
}
.file input {
position: absolute;
font-size: 20px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
<script type="text/javascript">
$(function(){
// $('#submitFile').click(function() {
$('#files').change(function() {
if($("#files").val()==""){
alert("上传文件不能为空!");
return false;
}
$.ajaxFileUpload({
url:'UploadCaseServlet',//处理图片脚本
secureuri :false,
fileElementId :'files',//file控件id
dataType : 'json',
success : function (data, status){

alert(data.msg.path);
$("#img1").attr('src', data.msg.path);
$("#filepath").attr('value', data.msg.path)
if(typeof(data.error) != 'undefined'){
if(data.error != ''){
alert(data.error);
}else{
alert(data.msg);
}
}
},
error: function(data, status, e){
alert(e);
}
});
}
);
});
</script>
</head>
<body>
<div>

<input type="text" id="filepath" name="filepath" style="width:120px;"/>
<a href="javascript:;" class="file">浏览...
<input type="file" id="files" name="files" />
</a>
<p><img id="img1" title="上传的图片" alt=""src="" style="width:100px;height:100px;" /></p>
</div>
</body>
</html>

0 0