我尝试过使用以下代码，但现在有点卡住了，但这就是我想要实现的目标：
- 在下面的输入和更新预览 HTML 中输入值
- 一旦用户对预览输出感到满意，可以单击"生成"
- 单击"生成"后，它实际上会将预览 HTML 写入同一文件夹中的 first_name last_name.html文件，然后重定向到first_name last_name.html文件
jQuery/HTML 表单：
<html>
<head>
<title>Ambient Lounge - Create eSig</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<!-- Include JS File Here -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<style type="text/css">
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
}
hr {
margin-bottom: 1.5em;
}
.error_wrapper {
color: #D8000C;
background-color: #FFBABA;
padding: 10px;
margin-bottom: 1em;
}
.success_wrapper {
color: #4F8A10;
background-color: #DFF2BF;
padding: 10px;
margin-bottom: 1em;
}
#main {
float: left;
width: 20%;
}
#preview {
float: left;
width: 80%;
}
form label {
display: none;
}
form input {
margin-bottom: 0.5em;
padding: 5px;
width: 80%;
}
</style>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".error_wrapper, .success_wrapper").hide();
var v_first_name = $("#first_name").val();
var v_last_name = $("#last_name").val();
var v_title = $("#title").val();
var v_address = $("#address").val();
var v_phone = $("#phone").val();
var v_mobile = $("#mobile").val();
var v_email = $("#email").val();
var v_web = $("#web").val();
$(".input_change").keyup(function(){
$("#btn").attr("disabled", "disabled");
var current_input = $(this).attr("id");
console.log(current_input);
$("#p_" + current_input).html($("#" + current_input).val());
});
$("#verify").click(function() {
var has_error = false;
$('#first_name, #last_name, #title, #address, #email, #web').each(function() {
$(this).attr('style', 'border: 0;');
if ($(this).val() == '') {
$(".error_msg").html("<strong>Error(s):</strong> You are missing some enteries, please check and try again.");
$(".error_wrapper").show();
$(this).attr('style', 'border: 1px solid red;');
has_error = true;
}
});
if (has_error != true) {
$(".error_wrapper").hide();
alert("You have verified changes, please double check and if happy click create otherwise change values and verify again.");
$("#btn").removeAttr('disabled');
}
});
$("#btn").click(function() {
$.post("create_post.php", { // Data Sending With Request To Server
first_name:v_first_name,
last_name:v_last_name,
title:v_title,
address:v_address,
phone:v_phone,
mobile:v_mobile,
email:v_email,
web:v_web
}, function(response,status) { // Required Callback Function
alert("*----Received Data----*nnStatus : " + status);//"response" receives - whatever written in echo of above PHP script.
alert(response);
if(status == "success") {
$("#form")[0].reset();
} else {
}
});
});
});
</script>
</head>
<body>
<h2>Create e-mail signature</h2>
<hr>
<div class="error_wrapper">
<div class="error_msg"></div>
<ul></ul>
</div>
<div class="success_wrapper">
<div class="success_msg"><strong>Congraulations!</strong> You have successfully create your e-mail signature. You can view your e-mail signature by clicking <a href="http://www.ambientlounge.com/emails/">here</a>.</div>
</div>
<div id="main">
<form id="form" method="post">
<label>First Name</label>
<input type="text" name="first_name" id="first_name" class="input_change" placeholder="First name"/><br>
<label>Last Name</label>
<input type="text" name="last_name" id="last_name" class="input_change" placeholder="Last name"/><br>
<label>Title</label>
<input type="text" name="title" id="title" class="input_change" placeholder="Job title"/><br>
<label>Address</label>
<input type="text" name="address" id="address" class="input_change" placeholder="Business Address"/><br>
<label>Phone</label>
<input type="text" name="phone" id="phone" class="input_change" placeholder="Phone number"/><br>
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" class="input_change" placeholder="Mobile number"/><br>
<label>Email</label>
<input type="text" name="email" id="email" class="input_change" placeholder="Email address"/><br>
<label>Web</label>
<input type="text" name="web" id="web" class="input_change" placeholder="Web address"/>
</form>
<button id="verify">Verify</button> <button id="btn" disabled>Create</button>
</div>
<div id="preview">
<!-- PREVIEW OF HTML EMAIL -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<style type="text/css">
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
.clear {
clear: both;
}
b {
font-weight: normal;
}
b.bold {
font-weight: bold;
}
.emailContent {
font-family:'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
width: 480px;
color: #767676;
}
.emailContent a {
color: #2A96B4;
text-decoration: none;
}
.emailName {
height: 62px;
}
.emailName img {
float: right;
margin-top: 1.2em;
margin-right: 0.8em;
}
.emailName p {
color: #767676;
font-size: 0.8em;
float: left;
}
.emailName p span {
color: #2A96B4;
font-weight: bold;
font-size: 1.2em;
}
.emailLogo {
height: 46px;
clear: both;
}
.emailLogo img {
float: left;
margin-top: 0.3em;
}
.emailLogo ul.socialList {
list-style: none;
border-left: 1px solid #aaaaaa;
padding-left: 1.5em;
margin: 0 0 0 1.5em;
float: left;
}
.emailLogo ul.socialList li {
display: inline-block;
}
.emailLogo ul.socialList li img {
margin: 0;
}
.emailDetails {
clear: both;
border-top: 5px solid #2A96B4;
margin-top: 1em;
}
.emailDetails p {
font-size: 12px;
margin: 0.3em 0;
}
.emailDetails p.larger {
font-size: 14px;
}
.emailDetails p span {
color: #2A96B4;
}
.emailNotice {
border-top: 1px solid #aaaaaa;
font-size: 0.6em;
padding-top: 0.8em;
margin-top: 2.5em;
}
</style>
<div class="emailContent">
<div class="emailName">
<p><span><b id="p_first_name" class="bold">James</b> <b id="p_last_name" class="bold">Brandon</b></span><br><b id="p_title">Global Technical Lead</b></p>
<img src="http://www.ambientlounge.com/emails/like-us-on-facebook.png" alt="Like us on Facebook" />
</div>
<div class="clear"></div>
<div class="emailLogo">
<img src="http://www.ambientlounge.com/emails/ambient-logo-email.png" alt="Ambient Lounge" />
<ul class="socialList">
<li><a href="http://www.facebook.com/ambientlounge" title="Ambient Lounge: Facebook"><img src="http://www.ambientlounge.com/emails/icon-facebook.png" alt="Facebook" /></a></li>
<li><a href="http://www.twitter.com/ambientlounge" title="Ambient Lounge: Twitter"><img src="http://www.ambientlounge.com/emails/icon-twitter.png" alt="Twitter" /></a></li>
<li><a href="http://www.instagram.com/ambientlounge" title="Ambient Lounge: Instagram"><img src="http://www.ambientlounge.com/emails/icon-instagram.png" alt="Instagram" /></a></li>
</ul>
</div>
<div class="clear"></div>
<div class="emailDetails">
<p><span>a:</span> <b id="p_address">Old knows Factory, Unit 5C, Office 14, St Anns Hill Road, Nottingham, NG3 4GN</b></p>
<p><span>p:</span> <b id="p_phone">+44(0) 844 579 1112</b> | <span>m:</span> <b id="p_mobile">+44(0) 771 809 0 809</b></p>
<p class="larger"><a href="mailto:sarah@ambientlounge.co.uk"><span id="p_email">james@ambientlounge.com</b></a> | <a href="http://www.ambientlounge.co.uk/"><b id="p_web">www.ambientlounge.co.uk</b></a></p>
</div>
<p class="emailNotice">This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.</p>
</div>
</div>
</body>
</html>
当前 PHP 发布文件：
<?php
if($_POST["first_name"]) {
$first_name = $_POST["first_name"];
$last_name = $_POST["last_name"];
$title = $_POST["title"];
$address = $_POST["address"];
$phone = $_POST["phone"];
$mobile = $_POST["mobile"];
$email = $_POST["email"];
$web = $_POST["web"];
$filePath == $first_name + "-" + $last_name + ".html";
if(file_exists($filePath)){
echo "Already exisits";
} else {
touch( $filePath ); //create file if it does not exist
fwrite( $file, '
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ambient Lounge - e-Mail Signature (James Brandon)</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<style type="text/css">
@import url("http://fonts.googleapis.com/css?family=Open+Sans");
.clear {
clear: both;
}
.emailContent {
font-family:"Open Sans", "Helvetica Neue", Helvetica, sans-serif;
width: 480px;
color: #767676;
}
.emailContent a {
color: #2A96B4;
text-decoration: none;
}
.emailName {
height: 62px;
}
.emailName img {
float: right;
margin-top: 1.2em;
margin-right: 0.8em;
}
.emailName p {
color: #767676;
font-size: 0.8em;
float: left;
}
.emailName p span {
color: #2A96B4;
font-weight: bold;
font-size: 1.2em;
}
.emailLogo {
height: 46px;
clear: both;
}
.emailLogo img {
float: left;
margin-top: 0.3em;
}
.emailLogo ul.socialList {
list-style: none;
border-left: 1px solid #aaaaaa;
padding-left: 1.5em;
margin: 0 0 0 1.5em;
float: left;
}
.emailLogo ul.socialList li {
display: inline-block;
}
.emailLogo ul.socialList li img {
margin: 0;
}
.emailDetails {
clear: both;
border-top: 5px solid #2A96B4;
margin-top: 1em;
}
.emailDetails p {
font-size: 12px;
margin: 0.3em 0;
}
.emailDetails p.larger {
font-size: 14px;
}
.emailDetails p span {
color: #2A96B4;
}
.emailNotice {
border-top: 1px solid #aaaaaa;
font-size: 0.6em;
padding-top: 0.8em;
margin-top: 2.5em;
}
</style>
<div class="emailContent">
');
fwrite( $file, '
<div class="emailName">
<p><span>'.$first_name.' '.$last_name.'</span><br>'.$title.'</p>
<img src="http://www.ambientlounge.com/emails/like-us-on-facebook.png" alt="Like us on Facebook" />
</div>
<div class="clear"></div>
<div class="emailLogo">
<img src="http://www.ambientlounge.com/emails/ambient-logo-email.png" alt="Ambient Lounge" />
<ul class="socialList">
<li><a href="http://www.facebook.com/ambientlounge" title="Ambient Lounge: Facebook"><img src="http://www.ambientlounge.com/emails/icon-facebook.png" alt="Facebook" /></a></li>
<li><a href="http://www.twitter.com/ambientlounge" title="Ambient Lounge: Twitter"><img src="http://www.ambientlounge.com/emails/icon-twitter.png" alt="Twitter" /></a></li>
<li><a href="http://www.instagram.com/ambientlounge" title="Ambient Lounge: Instagram"><img src="http://www.ambientlounge.com/emails/icon-instagram.png" alt="Instagram" /></a></li>
</ul>
</div>
<div class="clear"></div>
<div class="emailDetails">
<p><span>a:</span> '.$address.'</p>
<p><span>p:</span> '.$phone.' | <span>m:</span> '.$mobile.'</p>
<p class="larger"><a href="mailto:'.$email.'">'.$email.'</a> | <a href="http://'.$web.'/">'.$web.'</a></p>
</div>
');
fwrite( $file, '
<p class="emailNotice">This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.</p>
</div>
</body>
</html>
');
$file = fopen( $filePath, "w" );
fwrite( $file, $data );
fclose( $file );
$data = file_get_contents( $filePath ); //do this after closing your writing
}
}
?>
您可以使用以下命令写入文件：
touch( $filePath ); //create file if it does not exist
$file = fopen( $filePath, "w" );
fwrite( $file, $data );
fclose( $file );
这将用你的 fwrite（） 替换整个文件内容。
您可以检查文件是否已存在
file_exists( $filePath );
您可以通过以下方式定义自定义文件路径
$filePath = "whatever directory you want it to go to/". $firstnamevariable ."-". $lastnamevariable .".html";
您可以保留一个正在运行的 $data 变量，通过追加到最后写入文件，就像上面的$filePath追加方式一样。 或者，您可以简单地多次写入文件。
fwrite( $file, "<html><head></head><body>" );
fwrite( $file, "<div>First Name: ". $firstnamevaraible ."</div>" );
fwrite( $file, "<div>Last Name: ". $lastnamevariable ."</div>" );
fwrite( $file, "</body></html>" );
创建文件后，如果您想将全部内容返回给用户，您可以执行
$data = file_get_contents( $filePath ); //do this after closing your writing
然后，您可以将$data回显给用户，或者如果需要，只需回显该函数而无需变量。