<input type="file" id="fileName" name="file" />
</div>
<ul id="fileLsit" style="border:1px solid red;">
</ul>
<!--引入jquery类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--引入jquery.form插件-->
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
jQuery(function () {
var option =
{
type: 'post',
dataType: 'json', //数据格式为json
resetForm: true,
beforeSubmit: showRequest,//提交前事件
uploadProgress: uploadProgress,//正在提交的时间
success: showResponse//上传完毕的事件
}
jQuery('#fileName').wrap(
'<form method="post" action="test.php" id="myForm2" enctype="multipart/form-data"></form>');
jQuery('#fileName').change(function () {
$('#myForm2').ajaxSubmit(option);
});
});
//删除文件
var deleteFile = function (path, guid) {
console.log(path+'/'+guid);
jQuery.getJSON('test.php?option=delete', { path: path }, function (reslut) {
console.log(path+'/'+guid+''+reslut[0].info);
if (reslut[0].success) {//删除成功
jQuery('#' + guid).remove();
console.log('删除成功');
} else {//删除失败
alert(reslut[0].info);
}
});
console.log('end');
}
//上传中
var uploadProgress = function (event, position, total, percentComplete) {
jQuery('.btn span').text('上传中...');
}
//开始提交
function showRequest(formData, jqForm, options) {
jQuery('.btn span').text('开始上传..');
var queryString = $.param(formData);
}
//上传完成
var showResponse = function (responseText, statusText, xhr, $form) {
console.log(responseText);
if (responseText[0].success) {//成功之后返回文件地址、文件名称等信息 拼接呈现到html里面。
var str = '<li id="' + responseText[0].guid + '"><a href="' + responseText[0].fileName + '" target="_blank">' + responseText[0].fileName + '</a><span onclick="deleteFile('' + responseText[0].fileName + '','' + responseText[0].guid + '')" >删除</span></li>';
jQuery('#fileLsit').append(str);
}
jQuery('.btn span').text('上传完成');
jQuery('.btn span').text('添加附件');
}
</script>
</body>
</html>
以上所述是小编给大家介绍的jQuery.Form上传文件操作，希望对大家有所帮助，如果大家有任何疑问欢迎给留言，小编会及时回复大家的！
