我有一个html表单，它将POST数据发送到我的PHP脚本
它还使用AJAX在完成表单时提供预览
但是表单使用onsubmit =“”
我有的问题是html输入之一是图像。
表格如下，给你一个想法：
<form method="post" action="scripts/test.php" enctype="multipart/form-data"> <input type="hidden" name="size" id="size" value="small" /> <input type="hidden" name="type" id="type" value="1" /> <input type="hidden" name="pos" id="pos" value="front" /> <input type="hidden" name="number" id="number" value="none" /> <input type="hidden" name="name" id="name" value="none" /> <label>Choose Your First Shirt Colour</label><br /> <input class="color" value="ff3300" id="colour1" name="colour1" onchange="change()"> <br /><br /> <label>Choose Your Second Shirt Colour</label><br /> <input class="color" value="FFFFFF" id="colour2" name="colour2" onchange="change()"> <br /><br /><label>Add Your Logo: <br /> <span style="font-size:11px;color:#FF0000;">(if you are having trouble adding your logo please contact us on 0845 6018370)</span></label> <br /> <input type="file" name="logo" id="logo" onchange="change()"/><br /><br /> <label>Add Your Text:</label><br /> <textarea name="text" cols="30" id="text" rows="5" onchange="change()"></textarea><br /> <label><span style="color:#000000;">Quantity: </span></label> <input type="text" id="quantity" name="quantity" value="1" style="width:40px;height:20px;"/><br /><br /> <input type="button" name="preview" value="Preview" onclick="MyPreview()"/><br /> <input type="submit" name="submit" value="Submit" /> </form>我在用
var logo = document.getElementById（“logo”）。value;
对于图像，但是当我将徽标值发送到PHP时，它会破坏图像，因为它不是发送到PHP脚本所需的正确post值，就像您提交表单一样。
有没有人知道如何使用onchange和javascript获取徽标html字段的相同post值？
I have a html form which sends POST data to my PHP script
It also uses AJAX to provide a preview as they complete the form
However the form uses onsubmit=""
The issue i have is one of the html inputs is an image.
the form is as below to give you an idea:
<form method="post" action="scripts/test.php" enctype="multipart/form-data"> <input type="hidden" name="size" id="size" value="small" /> <input type="hidden" name="type" id="type" value="1" /> <input type="hidden" name="pos" id="pos" value="front" /> <input type="hidden" name="number" id="number" value="none" /> <input type="hidden" name="name" id="name" value="none" /> <label>Choose Your First Shirt Colour</label><br /> <input class="color" value="ff3300" id="colour1" name="colour1" onchange="change()"> <br /><br /> <label>Choose Your Second Shirt Colour</label><br /> <input class="color" value="FFFFFF" id="colour2" name="colour2" onchange="change()"> <br /><br /><label>Add Your Logo: <br /> <span style="font-size:11px;color:#FF0000;">(if you are having trouble adding your logo please contact us on 0845 6018370)</span></label> <br /> <input type="file" name="logo" id="logo" onchange="change()"/><br /><br /> <label>Add Your Text:</label><br /> <textarea name="text" cols="30" id="text" rows="5" onchange="change()"></textarea><br /> <label><span style="color:#000000;">Quantity: </span></label> <input type="text" id="quantity" name="quantity" value="1" style="width:40px;height:20px;"/><br /><br /> <input type="button" name="preview" value="Preview" onclick="MyPreview()"/><br /> <input type="submit" name="submit" value="Submit" /> </form>I am using
var logo =document.getElementById("logo").value;
for the image but when i am sending the logo value through to PHP it breaks the image as it isn't the correct post value required to be sent through to the PHP script as though you are submitting the form.
Does anyone know how to get the same post value for the logo html field simply by using onchange and javascript?
最满意答案
如果我理解正确，你只需要在文件输入的值发生变化时显示图像的预览，对吧？
如果是这样，我想你想做的只是从用户的本地驱动器加载图像的预览，而不是它真的上传到你的服务器。 当用户已经提交表单时，可以完成实际的文件上传。
要执行上述过程（加载图像文件的预览），HTML5的FileReader API 。
使用FileReader API实际上很简单，它可以像这样完成：
使用Javascript
var logo = document.getElementById("logo").files[0]; // will return a File object containing information about the selected file // File validations here (you may want to make sure that the file is an image) var reader = new FileReader(); reader.onload = function(data) { // what you want to do once the File has been loaded // you can use data.target.result here as an src for an img tag in order to display the uplaoded image someImageElement.src = data.target.result; // assume you have an image element somewhere, or you may add it dynamically } reader.readAsDataURL(logo);您可以将此代码放在onchange事件处理程序中，我猜您在这里不需要AJAX。
然后，当提交表单时，可以在$_FILES数组中的通常位置获取图像数据。
If I understood it correctly, you just want to display a preview of the image as the file input's value gets changed, right?
If so, I guess want you want to do is just to load a preview of the image from the user's local drive, without it really uploaded to your server yet. The actual file upload can be done when the user already submits the form.
To do the said process (loading a preview of the image file), HTML5's FileReader API.
Using the FileReader API is actually simple, and it can be done like so:
Javascript
var logo = document.getElementById("logo").files[0]; // will return a File object containing information about the selected file // File validations here (you may want to make sure that the file is an image) var reader = new FileReader(); reader.onload = function(data) { // what you want to do once the File has been loaded // you can use data.target.result here as an src for an img tag in order to display the uplaoded image someImageElement.src = data.target.result; // assume you have an image element somewhere, or you may add it dynamically } reader.readAsDataURL(logo);You can place this code inside your onchange event handler, and I guess you won't be needing AJAX in here.
Then when the form gets submitted, the image data can be obtained in its usual place, in the $_FILES array.
更多推荐
发布评论