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

以上是 jQuery.Form上传文件操作 的全部内容, 来源链接: utcz.com/z/325070.html

回到顶部