coldfusion_使用jquery＆coldfusion上传文件并预览:)

最新推荐文章于 2024-08-04 20:38:28 发布

cunchi8090

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量116

点赞数

文章标签： html js javascript java web ViewUI

原文链接：https://www.experts-exchange.com/articles/10549/Upload-the-File-Using-jquery-coldfusion-and-Preview-It.html

版权

coldfusion

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again

嗨，即使我已经在个人博客上创建了此教程，也可能有些人找不到我的网站，所以我在这里再次发布它

Today, from the topic it is very clear that i will be showing you here the very basic usage of how we can upload the Image Uploading with jquery and preview and without any Page refresh.

今天，从主题开始，很明显，我将在这里向您展示如何使用jquery和预览上传图像而无需刷新页面的最基本用法。

The basic involves that you must be familiar with little bit of jquery and html/cfml file uploading. i am not going to use HTML 5 here, I will be working on HTML 4 and jquery to Upload the image and show the user without any Page refreshes.

基本要求您必须熟悉一点jQuery和html / cfml文件上传。我不会在这里使用HTML 5，我将使用HTML 4和jquery来上载图像并显示用户，而无需刷新页面。

There are many jquery Plugins or other Plugins which do the Uploading for you, But this is very Simple and you will love it, I bet

我敢打赌，有许多jquery插件或其他插件可以为您完成上传，但这非常简单，您一定会喜欢的

Now we had enough talk, let’s get down to the code now

现在我们已经进行了足够的讨论，现在让我们开始编写代码

So here is the code for the Basic page. This is quite simple as you will see that i have just added a simple upload button and we are doing the page processing, Now here is an update you can even add the javascript to this page to detect if user is uploading any other file rather than image file. you can add even more functions whatever you like like check javascript image size and others, That are all long things, you can do, so we start with Basic Info

因此，这是“基本”页面的代码。这非常简单，因为您将看到我刚刚添加了一个简单的上传按钮，并且我们正在执行页面处理，现在这是一个更新，您甚至可以将javascript添加到此页面以检测用户是否在上传其他文件，而不是在上传图像文件。您可以随意添加更多功能，例如检查javascript图像大小和其他功能，这些都是您可以做的，所以我们从基本信息开始

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" lang="en" />
<script language="javascript" src="s_js/jquery.min.js"></script>
<script language="javascript" src="s_js/jquery.form.js"></script>
<script language="javascript">
$(document).ready(function() {
	$('#submitImage').bind('click', function(){
  		$(".preview").html('');
		$(".preview").html('<img src="images/loader.gif" alt="Uploading...."//>');
		$("#cropimage").ajaxForm({
		target: '.preview'
		}).submit();
	});
});
</script>
</head>
<body>
<table align="center" width="750" cellpadding="1" cellspacing="2" style="border:1px solid #F00">
<tr>
<td colspan="2">
<form id="cropimage" method="post" enctype="multipart/form-data" action='ajaximage.cfm'>
<table width="100%" align="center" cellpadding="2" cellspacing="0">
	<tr><td align="left"><input type="file" name="uploadurlimage" style="border:1px solid #666;" id="uploadurlimage"/></td></tr>
	<tr><td align="left"><input type="button" name="submitImage" id="submitImage" class="acb" value="Upload"></td></tr>
</table>
<br /><div class='preview'></div>
</form></td>
</tr>
</table>
</body>
</html>

Now after this Code, we will be doing the serverside code as we have defined whatever we need to define in our main page

现在，在此代码之后，我们将按照定义在主页面中定义的内容进行服务器端代码

So server Side Code like this

所以像这样的服务器端代码

<cfset validFormats = "image/*">
<cfif isDefined('uploadurlimage') AND uploadurlimage NEQ ''>
	<cfset ifolder8 = "temp">
	<cfset nifolder8 = ExpandPath("myfolder/#ifolder8#")>
	<cfset TAB = Chr(9)>
		<cfif NOT DirectoryExists(nifolder8)>
			<cfdirectory action="create" directory="#nifolder8#" mode="777">
		</cfif>
	<cfset Path = nifolder8>
</cfif>
<cffile action="upload" filefield="uploadurlimage" accept="#validFormats#" destination="#Path#\" nameconflict="overwrite">
<cfset sFile = cffile.serverFile>
<cfimage action="resize" width="#form.isize#" height="" source="#Path#\#sFile#" destination="#Path#\#sFile#" overwrite="yes">
<cfimage action="write" source="#Path#\#sFile#" destination="#Path#\#sFile#" overwrite="true">
<cfoutput><img src="#Path#/#sFile#" /></cfoutput>

Now we are all done, here we have created the Uploading using jquery and coldfusion

现在我们都完成了，在这里我们使用jquery和coldfusion创建了Uploading

Now let me explain you two things,

现在让我向您解释两件事，

First i have used the jquery.form.js file to handle the form submission from this URL

首先，我使用了jquery.form.js文件来处理从此URL提交的表单

Jquery Form

jQuery表格

and the little Snippet of this Code do all the functionality

该代码的小片段可以完成所有功能

$(document).ready(function() {
$('#submitImage').bind('click', function(){
$(".preview").html(''); //This is the div we have defined where we will show the uploaded file
$(".preview").html('<img src="images/loader.gif" alt="Uploading...."//>'); // This is actually called to show the progress bar, if we do not want it, we can actually remove this thing
$("#cropimage").ajaxForm({
target: '.preview'
}).submit(); // cropimage is the name of the form from where we are doing an ajaxForm submission and it does this stuff at backend, we have used the target attribute to show the uploaded or any message in the preview div class, which will show us the result. and lastly we are just doing the submission, see that is a post request.
});
});

So no more Page refreshes and Your code is complete, do whatever functionality you want to do in the server CFM page like imageResize, ImageCrop or anything.

因此，不再刷新页面，代码就完成了，执行服务器CFM页面中想要执行的任何功能，例如imageResize，ImageCrop或其他任何功能。

The Stuff get it going.

东西让它前进。

Cheers

干杯

翻译自: https://www.experts-exchange.com/articles/10549/Upload-the-File-Using-jquery-coldfusion-and-Preview-It.html

coldfusion

cunchi8090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
coldfusion_使用jquery＆coldfusion上传文件并预览:)

coldfusion Today, from the topic it is very clear that i will be showing you here the very basic usage of how we can upload the Image Uploading with jquery and...
复制链接

扫一扫