jquery.form上传文件
Posted 飞狐爷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery.form上传文件相关的知识，希望对你有一定的参考价值。
建立test文件夹
php代码：
<?php
//var_dump($_FILES[\'file\']);exit;
if(isset($_GET[\'option\']) && $_GET[\'option\']==\'delete\'){
@file_put_contents(dirname(__FILE__)."/------------0.txt", $_GET[\'path\']."\\r\\n",FILE_APPEND);
unlink($_GET[\'path\']);
$rs[] = array(
\'success\'=>true,
\'info\'=>\'ok\'
);
if(file_exists($_GET[\'path\'])){
$rs[][\'success\']=false;
$rs[][\'info\']=\'未删除\';
}
die(json_encode($rs));
}
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/png")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < (1024*1024)))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
else
{
if (file_exists("test/" . $_FILES["file"]["name"]))
{
$fn = $_FILES["file"]["name"];
}
else
{
$imgurl = substr($_FILES["file"]["name"], strpos($_FILES["file"]["name"], \'.\'));
$imgurl = date("YmdHis",time()).$imgurl;
move_uploaded_file($_FILES["file"]["tmp_name"],"test/" . $imgurl);
$fn = "test/" . $imgurl;
}
}
$return_str[] = array(
\'guid\'=>date(\'His\',time()),
\'path\'=>\'test/\',
\'fileName\'=>$fn,
\'success\'=>true
);
}
else
{
$return_str[] = array(
\'guid\'=>date(\'His\',time()),
\'path\'=>\'test/\',
\'fileName\'=>$_FILES["file"]["name"],
\'success\'=>false,
\'error\'=>$_FILES["file"]["error"]
);
}
echo json_encode($return_str);
?>
html代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" /> <title>文件上传</title> <style type="text/css"> .btn { position: relative; background-color: blue; width: 80px; text-align: center; font-size: 12px; color: white; line-height: 30px; height: 30px; border-radius: 4px; } .btn:hover { cursor: pointer; } .btn input { opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0px; left: 0px; line-height: 30px; height: 30px; width: 80px; } #fileLsit li span { margin-left: 10px; color: red; } #fileLsit { font-size: 12px; list-style-type: none; } </style> </head> <body> <div class="btn"> <span>添加附件</span> <!--这里注意：file 标签必须具有name属性，由于没有加name属性，文件上传不到服务到哪--> <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上传文件的主要内容，如果未能解决你的问题，请参考以下文章