JavaScript

超轻量级php框架startmvc

jQuery.Form上传文件操作

更新时间:2020-04-21 00:38:31 作者:startmvc
建立test文件夹PHP代码:<?php//var_dump($_FILES['file']);exit;if(isset($_GET['option'])&&$_GET['option']==

建立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上传文件操作,希望对大家有所帮助,如果大家有任何疑问欢迎给留言,小编会及时回复大家的!

jquery form 上传文件